为什么这个CSS的边缘风格不起作用？

我尝试在另一个div内的div上添加边距值。 所有的工作正常，除了最高价值，似乎被忽略。 但为什么？

我所期望的：
我期望的边距：50px 50px 50px 50px;

我得到：
我得到的边距：50px 50px 50px 50px;

码： 

#outer { width: 500px; height: 200px; background: #FFCCCC; margin: 50px auto 0 auto; display: block; } #inner { background: #FFCC33; margin: 50px 50px 50px 50px; padding: 10px; display: block; } 
 <div id="outer"> <div id="inner"> Hello world! </div> </div>

W3School没有解释为什么保证金行为如此。

实际上，您看到#inner元素的顶部边距折叠到#inner元素的顶部边缘，只保留了#outer边距（尽pipe未在图像中显示）。 两个盒子的顶部边缘相互齐平，因为它们的边缘相等。

以下是W3C规范的相关要点：

8.3.1崩溃边缘

在CSS中，两个或更多个盒子（可能或不可能是兄弟）的相邻边缘可以组合成单个边缘。 据说结合这种方式的利润率将会崩溃 ，由此产生的综合利润率被称为崩溃利润率 。

相邻的垂直边缘崩溃[…]

两条边界相邻，当且仅当：

  • 都属于参与相同块格式上下文的stream入块级别框
  • 没有线框，没有清除，没有填充和没有边界分开他们
  • 都属于垂直相邻的盒子边缘，即构成以下对中的一个：
    • 盒子的顶部边缘和其第一stream入孩子的顶部边缘

之所以做以下任何一项操作，是为了防止边距崩溃：

  • 浮动你的任何div元素
  • 制作你的div元素内联块
  • 将#outer overflow设置为auto （或者除了visible之外的任何值）

是因为：

  • 漂浮的箱子和任何其他箱子之间的边距不会崩溃（甚至在漂浮物和其stream入儿童之间也是如此）。
  • build立新的块格式化上下文的元素的边界（例如具有“可见”之外的“溢出”的浮点数和元素）不会因其stream入子元素而崩溃。
  • 内联块框的边距不会折叠（即使是stream入的孩子也是如此）。

左右边距的行为与您的期望相同，因为：

水平的边缘永远不会崩溃。

尝试使用display: inline-block; 在内部分区。 

 #outer { width:500px; height:200px; background:#FFCCCC; margin:50px auto 0 auto; display:block; } #inner { background:#FFCC33; margin:50px 50px 50px 50px; padding:10px; display:inline-block; }

@BoltClock提到的是非常可靠的。 在这里，我只是想为这个问题添加更多的解决scheme。 检查这个w3c_collapsing余量 。 绿色的部分是潜在的思想如何解决这个问题。

解决scheme1

漂浮的箱子和任何其他箱子之间的边距不会崩溃（甚至在漂浮物和其stream入儿童之间也是如此）。

这意味着我可以将float:left添加到#outer或者#inner demo1中 。

也注意到float会使保证金中的auto无效。

解决scheme2

build立新的块格式化上下文的元素的边界（例如具有“可见”之外的“溢出”的浮点数和元素）不会因其stream入子元素而崩溃。

除了visible ，让我们把overflow: hidden到#outer 。 这种方式看起来非常简单和体面。 我喜欢。 

 #outer{ width: 500px; height: 200px; background: #FFCCCC; margin: 50px auto; overflow: hidden; } #inner { background: #FFCC33; height: 50px; margin: 50px; }

解决scheme3

绝对定位的盒子的边距不会崩溃（即使他们的stream入儿童也没有）。 

 #outer{ width: 500px; height: 200px; background: #FFCCCC; margin: 50px auto; position: absolute; } #inner{ background: #FFCC33; height: 50px; margin: 50px; }

要么 

 #outer{ width: 500px; height: 200px; background: #FFCCCC; margin: 50px auto; position: relative; } #inner { background: #FFCC33; height: 50px; margin: 50px; position: absolute; }

这两种方法将打破div的正常stream程

解决scheme4

内联块框的边距不会折叠（即使是stream入的子项也是如此）。

和@enderskill一样

解决scheme5

stream入块级元素的底部边界总是与其下一个stream入块级同级的顶部边界折叠，除非该兄弟元素具有空隙。

这与问题没有太大关系，因为它是兄弟姐妹之间的崩溃边缘。 它通常意味着如果一个机顶盒的margin-bottom: 30px而一个兄弟机箱的margin-top: 10px 。 他们之间的总边距是30px而不是40px 。

解决scheme6

如果元素没有顶部边界，没有顶部填充，并且子元素没有空隙，则stream程块元素的顶部边距将与其第一个stream入块级别的顶部边距一起折叠。

这是非常有趣的，我可以只添加一个顶部边框线 

 #outer{ width: 500px; height: 200px; background: #FFCCCC; margin: 50px auto; border-top: 1px solid red; } #inner { background: #FFCC33; height: 50px; margin: 50px; }

另外<div>是默认的块级别，所以你不必故意地声明它。 抱歉，由于我的新手声望，无法发布超过2个链接和图片。 至less你知道下次你看到类似的东西时问题来自哪里。

如果你添加任何填充到#outer ，它的工作。

演示 

 #outer { width:500px; height:200px; background:#FFCCCC; margin:50px auto 0 auto; display:block; padding-top:1px; }

不完全确定为什么，但改变内部的CSS 

 display:inline-block;

似乎工作;

不知道为什么你有什么不工作，但你可以添加

overflow: auto;

到外面的div。

不回答“为什么”（必须是瓦特/折叠边缘），但似乎最简单/最合乎逻辑的方法来做你想做的事情只是添加padding-top到外部div ：

http://jsfiddle.net/hpU5d/1/

小调 – 不需要设置div来display:block; 除非你的代码中还有别的东西告诉它不要阻塞。

尝试这个： 

 #outer { width:500px; height:200px; background:#FFCCCC; margin:50px auto 0 auto; display:table; } #inner { background:#FFCC33; margin:50px 50px 50px 50px; padding:10px; display:block; }​

http://jsfiddle.net/7AXTf/

祝你好运

我猜想把#inner div的position属性设置为relative也可能有助于达到这个效果。 但无论如何，我试着在IE9和最新的谷歌浏览器的问题上粘贴的原始代码，他们已经给予了理想的效果，没有任何修改。

对于外部div，使用padding-top:50px 。 像这样的东西： 

 #outer { width:500px; height:200px; background:#FFCCCC; margin:50px auto 0 auto; display:table;}

注意：填充会增加你div的大小。 在这种情况下，如果你的div的大小是重要的，我的意思是如果它必须有一个特定的高度。 减less高度50px： 

 #outer { width:500px; height:150px; background:#FFCCCC; margin:50px auto 0 auto; display:table;}

你试过了吗？重要的是，它会强迫一切： 

 margin:50px 50px 50px 50px !important;
Interesting Posts