显示器奇怪的保证金问题：内联
这里是小提琴
当我将#two设置为内嵌块时，它会从<p>减去#two上下边距，并将其添加到divs内容框高度，使其变为52px而不是20px。为什么会出现这种情况？
你所看到的是边缘崩溃的一个陌生案例。
如果父项和子项是块元素，并且没有任何内容（填充，边界等）将其垂直边距分开，则这些边界将会崩溃。 没有添加两个相邻页边距（如您所期望的）时，折叠页边距会显示，但是会显示较大的页边距。 在父母子女的情况下，折叠的保证金最终在父母之外。 您可以在上述链接的“父母”和“首先/最后一个孩子”一节中阅读更多详细信息。
将父级设置为inline-block ，或将float:left; 它或其他一些东西（请参阅更完整列表的链接）将使边距不再折叠。 这导致我们习惯的行为：孩子的边距将出现在父亲的内部，增加到其总高度，父母的边距也会显示出来。
详细阐述并扩展现有的答案。
这种行为被称为折叠边距。
8.3.1折叠边距
在CSS中，两个或多个盒子（可能或可能不是兄弟姐妹）的相邻边距可以组合成单个边距。 据说这种方式结合在一起的利润率会崩溃，并且由此产生的综合利润率被称为折叠利润率 。
要解决此问题，您需要建立一个新的块格式上下文：
9.4.1阻止格式化上下文
浮动，绝对定位的元素，块容器（如嵌入块，表格单元格和表格标题）不是块框，以及具有'可见'以外'溢出'的块框（除了传播该值到视口）为其内容建立新的块格式上下文 。
在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。 两个兄弟箱之间的垂直距离由“边距”属性决定。 块格式化上下文中相邻块级别框之间的垂直边距折叠。
因此，建立一个新的块格式的几种不同方法将是..
将父元素的overflow属性更改为默认值以外的值 - visible - （更新示例）
将元素的display更改为inline-block - （更新示例）
浮动元素 - （更新示例）
这已经得到了回答和接受，但我想指出，澄清它会防止边缘崩溃，从而使其行为正常化
我会补充一点：
.two:before,
.two:after {
content: " ";
display: table;
}
.two:after {
clear: both;
}
看到这个小提琴。 这是我用过的Nicholas Gallagher clearfix。
链接地址: http://www.djcxy.com/p/89237.html