Display : Block Inside Display : Inline

Alors que la question pose le scénario d'un élément display:block au sein d'un display:inline parent, la question fondamentale concerne les différences entre ces deux valeurs d'affichage dans un tel scénario.

Selon la spécification CSS 2.1, lorsqu'un élément en ligne contient un élément de bloc, la boîte en ligne est divisée autour du bloc. Des boîtes de bloc anonymes sont créées autour du contenu en ligne avant et après le bloc, et le bloc devient un frère de ces boîtes anonymes.

Il en résulte une structure dans laquelle l'élément parent, même s'il est défini comme display : inline, se comporte différemment en raison de la présence de l'enfant display:block. L'élément parent devient effectivement une boîte de blocage contenant des boîtes de blocage anonymes.

Différences entre l'affichage : en ligne et l'affichage : parent de bloc

Malgré la similitude de structure, il existe de subtiles différences entre les éléments parents display:inline et display:block dans ce scénario :

• Flux de contenu : Les éléments en ligne s'écoulent horizontalement avec le texte, tandis que les éléments de bloc s'écoulent verticalement. Les boîtes de bloc anonymes créées autour du parent en ligne permettent l'empilement vertical des éléments enfants, simulant le comportement du bloc.
• Génération de boîtes de blocs anonymes : Display : inline entraîne la génération de boîtes de blocs anonymes pour le contenu en ligne adjacent à l’enfant du bloc. Ce n'est pas le cas avec un parent display:block, où l'élément parent entier devient une boîte de bloc.
• Traitement des bordures : La spécification CSS 2.1 note que certaines propriétés, telles que la bordure, s'appliquent toujours aux éléments qui génèrent des boîtes de bloc anonymes. Par conséquent, un parent display:inline avec une bordure aura la bordure tracée autour des boîtes de bloc anonymes, créant une bordure ouverte au niveau des sauts de ligne. En revanche, un parent display:block avec une bordure aura une bordure fermée autour de la zone de bloc entière.
• Habillage du texte : Les éléments en ligne enveloppent naturellement le texte autour d'eux. Dans ce scénario, les zones de bloc anonymes entourant le contenu en ligne empêchent le texte de s'enrouler autour de l'enfant du bloc, comme si le parent était un élément display:block.