DEVENIR-WEBMASTER.COM Log In
 12
close

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

Visiter ma chaine Youtube

# Introduction close

On a vu que chaque élément HTML occupait 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 boites.

  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.

# Les éléments de type inline close

Les boîtes issues des éléments de type inline peuvent contenir du texte ou d'autres éléments de type inline.

Les caractéristiques de la boîte sont calculées par le moteur de rendu en fonction du contenu. Vous ne pouvez pas redimensionner la boîte avec des règles CSS.

Vous pouvez mettre des marges padding ou margin mais seules les marges gauches et droites sont prises en compte.

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 parent. Si la place manque elles se fractionnent et suivent le texte qui va à la ligne.

Je donne ici quelques éléments de type inline : le lien a, le strong et le em, le span, le code.

# Les éléments de type block close

Les boîtes issues des éléments de type block peuvent contenir d'autres boîtes de type block (sauf exceptions) ou inline ou du texte.

Par défaut chaque boîte est créée sur une nouvelle ligne. Vous pouvez repositionner ou redimensionner la boîte avec des règles CSS.

Ces boîtes prennent toute la largeur disponible dans la boîte parent.

Je donne ici quelques éléments de type block : header, footer, nav, section, article, aside, h1 à h6, p, div, ul, li.

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

Vous pouvez avec la propriétés CSS display changer le type d'un élément.

Par exemple vous pouvez demander que la boîte d'un lien fonctionne comme une boîte de type block.

# Le display inline-block close

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.

# Les éléments embarqués close

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 boites sont positionnées comme les boites des éléments inline mais vous pouvez les redimensionner.