为什么父元素并不总是包含一致的子元素边距？

父元素的边距包含不一致

当有边距的元素放置在另一个元素中时，父元素并不总是一致地换行或包含该边距。这种不一致似乎违反直觉，尤其是与边框、位置、显示和溢出等其他属性的行为相比。

重叠边距和折叠

直觉上，人们可能会假设 CSS 规范中描述的边距折叠会影响此行为。然而，尽管跨浏览器不存在重叠边距和一致的行为，但这种不一致的根源在于其他地方。

边距包含背后的逻辑

CSS 规范实际上定义了这种行为虽然带有一些矛盾。规范讨论了“自由边距”（超出父元素的边距）和“折叠边距”（重叠的相邻边距），但没有明确区分每种边距的适用条件。

演示和结论

以下演示说明了这种不一致的行为：

<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>

将“块”元素（及其默认边距行为）与所有其他元素进行比较时，不一致是显而易见的元素。看起来，除了常规 div 的默认行为之外，所有内容都假定边距由父级包含。

这种复杂的行为源于 CSS 规范中关于边距折叠和可用边距的模糊性。不幸的是，文档没有提供关于这些概念如何与不同元素属性（如边框、位置和溢出）交互的清晰解释。

以上是为什么父元素并不总是包含一致的子元素边距？的详细内容。更多信息请关注PHP中文网其他相关文章！