父元素包含子元素边距不一致

当有边距的元素放置在另一个元素内时，父元素可能不会始终包含该边距。这种不一致的行为让很多开发者感到困惑。

要理解这种现象，有必要深入研究边距折叠的概念。 W3C 规范将折叠边距定义为两个或多个框的相邻边距（没有中间内容、填充或边框）的组合，以形成单个边距。

在放置了边距的元素的情况下在另一个元素中，子元素的上边距和下边距可以折叠到父元素的上边距。这通常会导致父元素包含子元素的边距。

但是，在某些条件下可以覆盖此默认行为。这些条件包括：

• 对父元素应用实线边框
• 将子元素的位置设置为绝对
• 给予子元素内联块显示
• 在父元素上启用自动溢出

这些覆盖背后的原因是它们都涉及创建一个边界，以防止子元素的边距通过父元素的边距折叠。

需要注意的是，W3C 关于边距折叠的规范有时可能会令人困惑并且看起来不合逻辑。他们将“自由边距”（会触及父级顶部或底部且不包含在其中的边距）与“折叠边距”（允许重叠的相邻边距）混合在一起。

标题为“折叠”的站点文章Margins”提供了对此行为的详细解释，包括说明原始问题中描述的确切场景的示例。了解这些行为对于在 Web 开发中创建一致且可预测的布局至关重要。