Pourquoi les éléments parents ne contiennent-ils pas toujours les marges des éléments enfants de manière cohérente ?

Confinement de marge incohérente de l'élément parent

Lorsqu'un élément avec une marge est placé dans un autre élément, l'élément parent ne s'enroule pas toujours de manière cohérente ou contenir cette marge. Cette incohérence semble contre-intuitive, surtout si on la compare au comportement d'autres propriétés telles que la bordure, la position, l'affichage et le débordement.

Marges superposées et effondrement

Intuitivement, on pourrait supposons que l'effondrement des marges, comme décrit dans la spécification CSS, affecte ce comportement. Cependant, malgré l'absence de marges qui se chevauchent et un comportement cohérent entre les navigateurs, la racine de cette incohérence réside ailleurs.

Logique derrière le confinement des marges

La spécification CSS définit en fait ce comportement, bien qu'avec quelques contradictions. Les spécifications traitent à la fois des « marges libres » (marges qui s'étendent au-delà de l'élément parent) et des « marges réduites » (marges adjacentes qui se chevauchent), sans distinguer clairement les conditions dans lesquelles chacune s'applique.

Démo et Conclusion

La démo suivante illustre ce comportement incohérent :

<code class="html"><div class="block">
  <h2 style="margin: 80px;">Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2 style="margin: 80px;">Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2 style="margin: 80px;">Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2 style="margin: 80px;">Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2 style="margin: 80px;">Is the margin contained (border)?</h2>
</div></code>

L'incohérence est évidente lorsque l'on compare l'élément "block" (avec son comportement de marge par défaut) à tous les autres éléments. Il semble que tout, sauf le comportement par défaut d'un div normal, suppose que la marge est contenue par le parent.

Ce comportement alambiqué provient de l'ambiguïté des spécifications CSS concernant l'effondrement des marges et les marges libres. Malheureusement, la documentation ne fournit pas d'explication claire sur la façon dont ces concepts interagissent avec différentes propriétés d'éléments telles que la bordure, la position et le débordement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!