当我向嵌套的DIV添加边距时，它会导致父DIV接收边距，除非我给父DIV一个边框。为什么？

Question

有没有其他人碰过这个？这是多年来第二次出现，我不确定解决它的“正确”方法。

我可以用孩子的填充来达到相同的效果，但这没有任何意义。

在Safari / FF中进行测试。

Answer 1

我通常通过在外部div上设置display: inline-block来解决此问题。它会使外部div占据显示其内容所需的空间。

An example，显示出差异。

Answer 2

它被称为保证金崩溃。当顶部和底部边距直接接触（没有被任何东西分开，如边界或换行符）时，边距会折叠成一个边距。这不是一个错误。请在SitePoint了解更多相关信息。

Answer 3

听起来像边缘崩溃这是自然行为。这是一个很好的阅读：

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

  

    

      

有多种方法可以解决保证金崩溃问题。一种方法是添加边框       或者在元素周围填充1px，这样边框就不再接触了，所以没有       更长时间的崩溃。

             

另一种阻止边距折叠的方法是改变边缘属性       CSS2 Specs解释了绝对和相对定位的盒子的边缘       不要崩溃。此外，如果你漂浮一个盒子，它的边距不再崩溃。并非总是如此       适合更改元素的位置属性，但在某些情况下，如果       你有不必要的保证金折叠问题，这可能是一个选择。