Block, Inline et Inline-Block

La propriété display est l’une des propriétés les plus fondamentales du CSS. Elle détermine la manière dont un élément participe au flux de mise en page : s’il crée une boîte de niveau bloc, une boîte en ligne ou une boîte intermédiaire.

Les éléments de type bloc commencent sur une nouvelle ligne et s’étendent pour remplir toute la largeur de leur conteneur. Vous pouvez définir leur largeur, leur hauteur, leur marge et leur espacement intérieur sur tous les côtés.

Éléments de type bloc par défaut : div, p, h1-h6, section, article.

Les éléments en ligne s’intègrent au texte. Ils ne commencent pas sur une nouvelle ligne. Définir width ou height n’a aucun effet. Les marges supérieure et inférieure sont ignorées ; les marges horizontales et l’espacement intérieur fonctionnent.

Éléments en ligne par défaut : span, a, strong, em, img.

display: inline-block est un mode hybride. Les éléments s’écoulent en ligne, sans saut de ligne forcé, mais prennent en charge la largeur, la hauteur et toutes les propriétés du modèle de boîte, comme les éléments de type bloc.

Avant Flexbox, inline-block était utilisé pour les barres de navigation horizontales. Son inconvénient : les espaces blancs dans le code source HTML créent de petits écarts entre les éléments.

L’espace entre les éléments inline-block peut être supprimé en définissant font-size: 0 sur le parent, puis en rétablissant la taille sur les enfants, ou en supprimant les espaces blancs dans le HTML.

En CSS moderne, définir display: flex sur le parent est la méthode privilégiée pour créer des mises en page horizontales sans problème d’espaces blancs. inline-block reste utile pour dimensionner un seul élément.

Le type d’affichage de n’importe quel élément peut être modifié avec le CSS. Cette technique sert couramment à donner une forme de bouton aux liens ou à disposer les éléments de liste horizontalement.

CSS fournit display: table, display: table-row, display: table-cell, etc., pour appliquer une mise en page de tableau à des éléments qui ne sont pas des tableaux. Ces valeurs sont rarement nécessaires aujourd’hui, mais elles sont utiles pour le centrage vertical dans les anciens contextes.

display: flow-root crée un nouveau contexte de formatage de blocs sans les effets secondaires de overflow: hidden. Il annule l’effet des éléments flottants et empêche la fusion des marges de se propager à l’extérieur d’un conteneur.

Lorsque des éléments de type bloc et des éléments en ligne sont mélangés parmi des éléments frères, le navigateur enveloppe le contenu en ligne orphelin dans des boîtes de bloc anonymes. Ce comportement est invisible, mais il explique les décalages inattendus de la mise en page.

Quelle valeur de display permet de définir width tout en conservant l’élément dans le flux en ligne ?

Les éléments de type bloc occupent toute la largeur et commencent sur une nouvelle ligne. Les éléments en ligne s’intègrent au texte et ignorent width/height. Inline-block combine les deux : il s’intègre en ligne tout en acceptant la largeur et la hauteur. Les mises en page modernes privilégient Flexbox et Grid aux grilles basées sur inline-block.