父元素的边距包含不一致
当有边距的元素放置在另一个元素中时，父元素并不总是一致地换行或包含该边距。这种不一致似乎违反直觉，尤其是与边框、位置、显示和溢出等其他属性的行为相比。
重叠边距和折叠
直觉上，人们可能会假设 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中文网其他相关文章！
