【问题标题】：Inner div's margin affecting containing div's margin内部 div 的边距影响包含 div 的边距
【发布时间】：2012-09-28 00:49:25
【问题描述】：

我在包含的 div 中有一个内部 div。

HTML

<div id="container">
  <div id="inner"></div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

小提琴

http://jsfiddle.net/8xUTJ/4/

我希望这会在一个更大的红色框中生成一个垂直和水平居中的小黑框。取而代之的是，我将一个黑框粘在了红框的顶部，而红框的顶部边缘。

有人能解释一下 CSS 认为它在这里做什么吗？

【问题讨论】：

标签： html css

【解决方案1】：

将overflow:auto 添加到#container div。

jsFiddle example

或者

为#container div 添加边框。

您可以在W3C 上阅读有关此折叠边距行为的更多信息。

【讨论】：

这种超奇怪的 CSS“边距崩溃”逻辑是否有一些隐藏的原因？？？这似乎是我遇到过的最反直觉的行为，我敢打赌，数百万开发人员已经陷入了这个坑，并尝试了诸如padding、overflow 等不必要的变通方法，从而导致了不必要的副作用……请原谅我直言不讳，但有时 CSS 似乎是最愚蠢的语言之一。

【解决方案2】：

虽然提供的解决方案是可行的，但没有人解释问题所在。这称为边距折叠，会在多种情况下发生。

场景 1 - 这些项目将仅相隔 30 像素，因为边距折叠在一起并且较大的一个占优势。

<div style="margin-bottom: 20px"></div>
<div style="margin-top: 30px"></div>

场景 2 -（您的场景）内框的边距溢出外框。

<div class="outer">
    <div style="margin-top: 20px"></div>
</div>

解决方案是给外框一些填充或边框（正如其他人所建议的那样）。很多时候，我在外盒上使用以下 CSS 来缓解这样的情况：

.outer {
    margin-top: -1px;
    border-top: 1px solid transparent;
}

【讨论】：

@j08691 这里的解释总是比一个简单的链接更好。
@toscho - 如果简短肯定，但是当链接足够时粘贴折叠边距的整个解释是没有意义的。另外，我很确定 W3C 不会很快消失。

【解决方案3】：

方法一

position:absolute 用于内部 div，因此它知道什么距离

有 30px 的边距

http://jsfiddle.net/8xUTJ/5/

方法2

display:inline-block 用于内部 div

http://jsfiddle.net/8xUTJ/7/

方法3

border:solid 0 transparent 到外部 div

http://jsfiddle.net/8xUTJ/8/

任你选：)

【讨论】：

【解决方案4】：

首先，#container 具有 margin-top:0 和 #inner 具有 margin-top:30px。这些元素的关系是父母和第一个孩子的关系。

如果没有边框、内边距、内联内容或间隙将块的 margin-top 与其第一个块的 margin-top 分开子块，或无边框、内边距、内联内容、高度、 min-height 或 max-height 用于分隔块的边距底部与最后一个孩子的 margin-bottom 一起，然后这些边距崩溃。折叠的边距最终在父级之外。

边距折叠意味着这些边距组合成单个边距，其大小是组合到其中的边距中最大的一个

这些规则甚至适用于零边距，因此第一个/最后一个孩子最终在其父母之外（根据规则上）无论父级的边距是否为零

这就是为什么你最终在#container 元素之外应用了 30px 上边距，从你的小提琴：

【讨论】：

【解决方案5】：

检查这个fiddle

您需要float 内部的div 才能使其工作

#inner {    
    margin:30px;
    float:left;   /* give float */
    width: 40px;
    height: 40px;
    background-color: black;
 }

或者将overflow:auto 属性赋予div#container。

检查这个fiddle

【讨论】：