为啥子垂直边距不扩展父容器？

Posted 2023-03-06

【中文标题】为啥子垂直边距不扩展父容器？

【英文标题】：Why don't child vertical margins expand parent container?为什么子垂直边距不扩展父容器？

【发布时间】：2012-07-24 23:37:24

【问题描述】：

我遇到了一个需要孩子的边距来扩展父容器的情况。发现parent外面的空间分配了，但是parent本身没有展开。然后我发现通过向父级添加“溢出：隐藏”可以解决这个问题。

谁能解释为什么会这样？

更新：

我发现向父级添加任何填充或边框值也可以解决此问题。

Updated Example

【问题讨论】：

+1 好问题。多年来一直在使用此修复程序.. 一直不知道原因.. 也想知道这个..

这是唯一的解决方法吗？处理overflow: hidden;的后果很烦人

一种解决方案是将padding: 10px 给父母而不是给孩子保证金。

@techfoobar 是的，我想我会用填充代替，虽然不理想。查看我更新的示例以获取替代修复。

这个问题很好的解释：complexspiral.com/publications/uncollapsing-margins

【参考方案1】：

截至 2018 年 7 月的小幅更新。Mozilla 有一个 great article 处理此问题，原因是保证金崩溃。

总结：父母和第一个孩子的边缘可能会崩溃。他们最终就好像父级有结果边距。

父母和第一个/最后一个孩子

如果没有边框、内边距、内联部分、创建的块格式上下文或将块的上边距与其第一个子块的上边距分开的间隙；或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

【参考方案2】：

“为什么”的答案描述得很好，很简洁here。某些属性会建立“block formatting context”。即：

浮动、绝对 [和固定] 定位元素、块容器（例如 非块的内联块、表格单元和表格标题） 框，并阻止具有“溢出”而不是“可见”的框（除了 当该值已传播到视口时）建立新的 阻止其内容的格式化上下文。

正是这种块格式化上下文的变化，为什么上面给出的 cmets 中给出的此类解决方案适用于 margin（在前面的 float 的情况下，@以下流入元素的 987654326@) 运行。

【讨论】：

链接到的文章不再可从 colinaarts.com 域获得，但可通过 here 获得。简单明了。谢谢！

【参考方案3】：

我认为折叠边距是原因：http://www.w3.org/TR/CSS2/box.html#collapsing-margins