Les éléments de type inline, block et inline-block. Les éléments embarqués.

#1 Introduction open

On a vu que chaque élément HTML occupe sur l'écran un espace rectangulaire. On a appelé cet espace une boîte. Maintenant que nous avons des boîtes, on va regarder comment se comportent ces boîtes.

  1. Que peut contenir la boîte ?
  2. Quelle place occupe-t-elle ?
  3. Peut-on la redimensionner ?
  4. Comment se positionnent des boîtes si on en met plusieurs à la suite ?

L'agencement des boîtes sur l'écran est fait par un module du navigateur que l'on appelle le moteur de rendu. Le moteur de rendu calcule les tailles et les positions des boîtes sur l'écran. Il le fait en tenant compte notamment du type de l'élément, à savoir block, inline, inline-block.

#2 Les éléments de type inline open

Je vous donne ici, quelques éléments qui sont des éléments de type inline : le lien a, le strong et le em, le span, le code, le button, le label, les input, le select, le textarea et le br. Et ensuite, je vous en parle 😎...

Les boîtes issues des éléments de type inline peuvent contenir du texte ou d'autres éléments de type inline. Ci-dessous, l'élément inline est le lien <a href='#'>un <strong>premier</strong> lien</a>. Il contient un autre élément de type inline, qui est l'élément strong. Le tout est placé dans un élément p (pour paragraphe) qui lui est un élément de type block.

  1. La taille de la boîte qui correspond à un élément de type inline correspond à la taille de son contenu.
  2. La taille de la boîte qui correspond à un élément de type block correspond à la taille de son conteneur (* j'y reviens plus bas dans le tuto).
  3. Evidemment, vous avez besoin de connaître ces informations, si vous voulez placer vos éléments HTML au bon endroit sur une page.
Tester le code

Pour un élément inline la taille de la boîte est calculée par le moteur de rendu en fonction du contenu. Vous ne pouvez pas redimensionner la boîte avec des règles CSS. C'est ce que j'essaie de faire sans succès dans l'exemple ci-dessous. Je mets un width de 100 pixels et un height de 100 pixels et ça n'a aucun effet sur cet élément.

Tester le code

Vous pouvez mettre une valeur de padding. Seuls les padding gauche et droit seront pris en compte.

Tester le code

Vous pouvez mettre une valeur de margin mais seules les marges gauches et droites seront prises en compte. Dans cet exemple, j'ai pris un élément div à la place de l'élément p car l'élément p a des marges par défaut de 1em (* Chrome).

Tester le code

Les boîtes issues des éléments de type inline sont positionnées par défaut les unes à côté des autres dans la boîte de leur élément conteneur. Si la place manque, elles se fractionnent et suivent le texte qui va à la ligne.

Tester le code

#3 Les éléments de type block open

Je vous donne ici quelques éléments qui sont des éléments de type block : header, footer, nav, section, article, aside, h1 à h6, p, div, ul, li. Et ensuite je vous en parle 😎...

Les boîtes issues des éléments de type block peuvent contenir d'autres boîtes de type block ou inline ou du texte. Ils ont souvent un rôle de conteneur. Il y a des exceptions, car on ne met pas un paragraphe dans un autre paragraphe. De même, on ne met pas un titre (h1 à h6) dans un autre titre (h1 à h6).

Par défaut, chaque boîte (block) est créée sur une nouvelle ligne et occupe toute la largeur disponible pour la ligne, c'est-à-dire la largeur du conteneur de cette ligne. Il faut tenir compte des marges et vous avez toutes les informations dans ce tutoriel Le modèle de boîte en HTML et en CSS.

Tester le code

Vous pouvez repositionner ou redimensionner la boîte avec des règles CSS. Ci-dessous, vous avez un exemple de redimensionnement en largeur sur un premier élément section puis en hauteur sur un deuxième élément article.

Tester le code

Le positionnement des éléments est un sujet plus délicat. Vous avez plusieurs tutoriels qui y sont dédiés :

  1. Le positionnement dans le flux.
  2. La propriété position.
  3. Le positionnement flottant.

#4 On peut changer le type d'un élément open

Vous pouvez, avec la propriété CSS display, changer le type de boîte que le moteur de rendu va associer à un élément HTML.

Dans l'exemple ci-dessous, je place d'abord deux liens sur ma page HTML. Par défaut, ces deux liens vont se placer dans deux boîtes qui sont l'une à côté de l'autre. Puis à l'aide d'une déclaration CSS display:block, je demande au moteur de rendu de placer ces deux liens dans des boîtes de type block. Et dans ces conditions, les deux liens vont se placer l'un en dessous de l'autre.

Tester le code

#5 Le display inline-block open

Vous pouvez demander qu'un élément ait un comportement intermédiaire en utilisant la valeur inline-block pour la propriété display. Dans ce cas, vous pourrez positionner les boîtes les unes à côté des autres comme pour des éléments inline et vous pourrez redimensionner la boîte comme un élément de type block. Je le fais ci-dessous pour des liens.

Tester le code

#6 Les éléments embarqués open

Parmi les éléments embarqués les plus courants, on peut citer l'élément img qui est utilisé pour implanter une image, l'élément audio et l'élément video.

Les éléments embarqués prennent place dans des boîtes dont la taille est définie à l'extérieur du moteur de rendu. Par exemple, une image ou une vidéo. Ces boîtes sont positionnées côte à côte, comme les boîtes des éléments inline, mais vous pouvez les redimensionner. C'est ce qui amène à faire la différence entre éléments inline et éléments embarqués.

Tester le code

Politique de confidentialité

Mentions Légales