为什么子纵向边距不会扩展父容器?

时间:2012-07-26 11:32:42

标签: css margin

我遇到过一个案例,我需要一个孩子的边距来扩展父容器。我发现父分区外的空间已分配,但父分布本身并未扩展。然后我发现通过向父母添加`overflow:hidden'我可以解决这个问题。

任何人都可以解释为什么会这样吗?

更新

我发现向父母添加任何填充或边框值也会修复此问题。

Updated Example

3 个答案:

答案 0 :(得分:15)

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

  

浮动,绝对[和固定]定位元素,阻止容器(如   不阻塞的内联块,表格单元格和表格字幕   盒子,以及“溢出”除“可见”以外的块盒(除了   当该值已传播到视口时)建立新的   阻止格式化其内容的上下文。

正是这种块格式化上下文的变化是为什么的原因上面评论中给出的这些解决方案适用于margin(以及前面{{1}的情况以下流入元素的float运行。

答案 1 :(得分:5)

我认为利润率下降是http://www.w3.org/TR/CSS2/box.html#collapsing-margins

的原因

答案 2 :(得分:3)

截至2018年7月的一个小更新。由于利润率下降,Mozilla在此问题上拥有great article

摘要:父级和第一个子级的边距可能会崩溃。他们最终好像父母有保证金

  

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

     

如果没有边框,内边距,内联部分,创建的块格式上下文,或者没有用于将块的页边距与第一个子块的页边距分开的间隙;或没有边框,内边距,内联内容,高度,最小高度或最大高度来将块的边距底部与最后一个子项的边距底部分开,则这些边距会崩溃。折叠后的边距最终出现在父级之外。