21

我在包含 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 认为它在这里做什么吗？

4

5 回答 5

30

添加overflow:auto到#containerdiv。

jsFiddle 示例

或者

#container为div添加边框。

您可以在W3C阅读更多关于这种折叠边距行为的信息。

于 2012-09-28T00:52:26.373 回答
13

虽然提供的解决方案是可行的，但没有人解释这个问题。这被称为边距崩溃，它发生在几种情况下。

场景 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;
}
于 2012-09-28T01:07:29.270 回答
3

方法一

position:absolute对于内部 div，所以它知道 什么是 30px 边距

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

方法二

display:inline-block对于内部 div

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

方法三

border:solid 0 transparent到外部 div

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

随便挑吧：）

于 2012-09-28T00:51:30.587 回答
2

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

如果没有边框、内边距、内联内容或间隙将块的外边距顶部与其第一个子块的外边距顶部分开，或者没有边框、内边距、内联内容、高度、最小高度或最大值-height 将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

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

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

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

30px 和 0 上边距折叠

于 2012-09-28T01:56:54.437 回答
1

检查这个小提琴

你需要float内在div才能让它发挥作用

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

否则将overflow:auto属性赋予div#container.

检查这个小提琴

于 2012-09-28T01:22:22.253 回答