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

【问题标题】：When I add a margin to a nested DIV, it causes the parent DIV to receive the margin instead, unless I give the parent DIV a border. Why?当我向嵌套 DIV 添加边距时，它会导致父 DIV 改为接收边距，除非我给父 DIV 一个边框。为什么？
【发布时间】：2010-10-15 05:15:21
【问题描述】：

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

我可以在孩子中使用填充来实现相同的结果，但这没有任何意义。

在 Safari/FF 中测试。

【问题讨论】：

我认为这是正确的行为；这一切都与 CSS 盒子模型有关

标签： css html parent-child margin

【解决方案1】：

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

An example，显示差异。

【讨论】：

【解决方案2】：

这被称为margin-collapse。当顶部和底部边距直接接触（不被任何东西分开，如边框或换行符）时，边距折叠成一个边距。这不是错误。在SitePoint 阅读有关它的更多信息。

【讨论】：

【解决方案3】：

听起来像边缘折叠，这是自然行为。这是一本好书：

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

有多种方法可以解决圆边距折叠问题。一种方法是添加边框或元素周围 1px 的填充，以便边框不再接触，因此没有更长的崩溃。

另一种阻止边距折叠的方法是更改 element.The CSS2 Specs 解释了绝对和相对定位框的边距不要崩溃。此外，如果您浮动一个盒子，它的边距不再折叠。并不总是适合更改元素的位置属性，但在某些情况下，如果您遇到了不必要的边距折叠问题，这可能是一个选项。

【讨论】：