Question

当我将#two设置为内联块时，它会从<p>中减去16 px的上/下边距并将其添加到divs内容框高度，因此它变为52px而不是20px ..为什么会这样呢？

Answer 1

的陌生案例之一

如果父元素和子元素是块元素，并且没有任何东西（填充，边框等）将它们的垂直边距分开，那么这些边距将会崩溃。折叠边距是指未添加两个相邻边距（如您所料），而是显示两者中较大的边距。在父子案例中，折叠的保证金最终在父母之外。您可以在上面的链接中的父母和第一个/最后一个孩子部分下阅读更多详细信息。

将父级设置为inline-block，或float:left;或其他一些内容（请参阅链接以获取更完整的列表）将阻止边距折叠。这会导致我们习惯的行为：孩子的边距将出现在父母的内部，增加其总高度，并且还会显示父母的边距。

Answer 2

详细阐述并扩展现有答案。

此行为称为collapsing margins。

8.3.1 Collapsing margins

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

要解决此问题，您需要建立一个新的块格式化上下文：

9.4.1 Block formatting contexts

浮动，绝对定位的元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），以及除“可见”以外的“溢出”的块框（除非该值已传播到视口）为其内容建立新的块格式化上下文。

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

因此，少数建立新块格式的不同方法是..

将父元素的overflow属性更改为默认值visible - (updated example)
将元素的display更改为inline-block - (updated example)
浮动元素 - (updated example)

Answer 3

这已经得到了回答和接受，我仍然想指出，明确修复它会阻止边缘崩溃，从而使其行为正常化

我补充说：

.two:before,
.two:after {
    content: " ";
    display: table; 
}

.two:after {
     clear: both;
}

见fiddle。这是我用过的Nicholas Gallagher clearfix。

Answer 4

段落内置边距（在大多数浏览器中）。

试试这个：

p 
{ 
    margin: 0px; 
}

显示的奇怪边距问题：内联块子

4 个答案: