非浮动元素的保证金问题

Question

我为侧边栏div中的div提供了20px的保证金。但由于某种原因，两个div之间的差距只有20px，应该是40px。来自box1的20px和来自box2的20px。我错过了一些小事。请指出。

小提琴：

http://jsfiddle.net/3UJWf/

HTML：

<div class="sidebar">
     <div class="box1 common">
         <p>Text is here</p>
     </div>
     <div class="box2 common">
         <p>Text is here</p>
     </div>
</div>

CSS：

*
{
    padding:0px;
    margin:0px;
}
.box1 {
    background:red;       
    padding: 40px;
    width: 300px;
}
.box2 {
    background: green;       
    padding: 40px;
    width: 300px;
}
.common {
    margin: 20px;
}

Answer 1

这是CSS 2.1规范

  

＆＃34;在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。以这种方式组合的边距据说会崩溃，并且产生的合并边距称为折叠边距。＆＃34;

Source

最好的解决方案是在两个div之间加上clearfix。

Answer 2

尝试使用.common{ display: inline-block }并为侧边栏指定宽度。 解决了我的问题

Answer 3

Check Demo

CSS Margin Collapsing

float:left;或display: inline-block解决了上述问题

让我们准确探究折叠边距的后果，以及它们将如何影响页面上的元素。

W3C规范定义了折叠边距，如下所示：

“

  

在本规范中，表达式折叠边距意味着   邻接边距（没有非空内容，填充或边界区域，或   两个或两个以上的盒子（可能在旁边）   彼此或嵌套）组合形成一个边缘。

”

简单来说，这个定义表明当两个元素的垂直边距接触时，只有具有最大边际值的元素的边缘将被尊重，而具有较小边缘值的元素的边缘将被接受。将折叠为零.1在一个元素具有负边距的情况下，将边距值相加以确定最终值。如果两者都是负数，则使用更大的负值。此定义适用于相邻元素和嵌套元素。

在其他情况下，元素的边距不会崩溃：

1. 浮动元素
2. 绝对定位元素
3. 内联块元素
4. 将溢出设置为除可见之外的其他元素（他们这样做 不要与子女一起贬值。）
5. 清除元素（它们不会崩溃它们的顶部边缘 父块的下边距。）根元素

This is a difficult concept to grasp, so let’s dive into some examples.