Html 为什么父元素不包含边距？

当一个具有边距的元素包含在另一个元素中时，父元素不会始终包装/包含该边距

许多情况会导致父对象包含子对象的边距：

• 边框：实心

• 位置：绝对位置

• 显示：内联块

• 溢出：自动

（这只是一个小测试，毫无疑问还有更多。）

我认为这与利润率下降有关，但：

W3C规范页面没有对此类行为的描述

这里没有重叠的页边距

在这个问题上，所有浏览器的行为似乎都是一致的

该行为受与边距无关的触发器的影响

默认为

overflow:auto

的元素应包含与溢出设置为auto的元素不同的材质的逻辑是什么

为什么除了常规div的默认行为之外，其他一切都应该假设保证金由母公司包含？为什么常规违约不包括保证金

---

编辑：最终答案是W3C确实指定了这种行为，但：

• 这些规格没有任何意义
• :
  • “自由页边距”（与父页顶部或底部接触的页边距不包含在父页中）以及
  • “折叠边距”（允许相邻边距重叠）

演示：

正文{
保证金：0；
}
分区块{
背景色：天蓝色；
}
div.inline-block{
显示：内联块；
背景色：蓝绿色；
}
绝对位置{
背景色：rgba（255255,0,7）；
位置：绝对位置；
底部：0；
右：0；
}
div.overflow-auto{
背景色：热粉红色；
溢出：自动；
}
分区边界{
背景颜色：海蓝宝石；
边框：实心；
}
氢{
利润率：80px；
宽度：250px；
边框：实心；
}

是否包含页边空白（块）？
是否包含边距（内联块）？
是否包含保证金（绝对头寸）？
是否包含页边距（自动溢出）？
是否包含页边空白（边框）？

CSS就是这样工作的：

在本规范中，表达式折叠边距表示两个或多个框（可能相邻或嵌套）的相邻边距（无非空内容、填充或边框区域，或将它们分隔开）组合形成单个边距

更具体地针对您的顶级div：

如果框的顶部和底部边距相邻，则边距有可能通过框折叠。在这种情况下，元素的位置取决于其与边距被折叠的其他元素的关系

• 如果元素的边距与其父元素的上边距折叠，则长方体的上边距将定义为与父元素的上边距相同
• 否则，要么元素的父元素未参与边距折叠，要么仅涉及父元素的底部边距。元素上边框的位置与元素具有非零下边框时的位置相同

---

我能做的最好的事情就是给你指出（汤米·奥尔森和保罗·奥布莱恩）。他们做了一个非常详细的解释，用例子向你展示了你在问题示例代码中演示的行为。

我不明白你在问什么。您是否在问为什么h1元素显示在容器元素中？请澄清你的问题。根据那篇文章，看到的行为是不正确的
关于您的回答：“崩溃的边距意味着相邻的边距…合并”。由于此处没有相邻的页边距，因此这不能是折叠页边距。具体来说，“如果元素的边距与其父元素的上边距一起折叠”，则不能，因为父元素没有上边距。在这个问题中，我处理的是不断下降的利润率。但是，无论是哪种情况，这都不能解释为什么当显示为内联块，或者溢出设置为自动（与默认值相同）时，行为应该改变。更正：在那篇文章中，它列出了我的一些触发器+其他触发器。正如这些触发器可以防止重叠页边距塌陷一样，它们也可以防止常规页边距塌陷。两个问题：1）这种行为有什么意义？2） 为什么它认为我有一个重叠的页边？@samgoody-1）我同意这没有多大意义，除非你来自印刷背景，而这正是编写规范时的网络背景。查看此处查看该视图：2）在您的情况下，这是一个父/子对象…父/子对象的折叠提供了

div.b

100px的垂直边距，这就是为什么背景为白色而不是绿色。我认为问题在于规范不清楚在这种情况下，哪一个利润率会在崩溃中获胜，似乎在当前浏览器中，家长得到了它。