显示的奇怪边距问题：inline-block child答案

【问题标题】：Strange margin issue with a display: inline-block child显示的奇怪边距问题：inline-block child
【发布时间】：2015-01-06 08:00:14
【问题描述】：

Heres the fiddle

当我将 #two 设置为 inline-block 时，它会从 <p> 中减去 16 px 的顶部/底部边距并将其添加到 div 内容框高度，因此它变为 52px 而不是 20px .. 为什么这是案例？

【问题讨论】：

这真是一个复杂的例子。为什么不删除不属于问题的 90% 的代码？

标签： html css

【解决方案1】：

您看到的是margin collapsing. 的陌生案例之一

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

将父级设置为inline-block，或float:left;ing 它或其他一些东西（请参阅链接以获得更完整的列表）将阻止边距折叠。这导致了我们习惯的行为：child 的 margin 会出现在 parent 内部，增加它的总高度，并且 parent 的 margin 也会显示出来。

【讨论】：

It does! 父子页边距都在显示，所以它们不会折叠。那有意义吗？作为比较，here's how it displays when the margins are collapsed.

【解决方案2】：

详细说明并扩展现有答案..

这种行为称为collapsing margins。

8.3.1 Collapsing margins

在 CSS 中，两个或多个框（可能是兄弟，也可能不是兄弟）的相邻边距可以组合成一个边距。以这种方式组合的边距称为折叠边距，由此产生的组合边距称为折叠边距。

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

9.4.1 Block formatting contexts

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

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

因此，几个不同的方法来建立一个新的块格式将是......

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

【讨论】：

【解决方案3】：

这已经得到回答和接受，但我还是想指出，清除它可以防止保证金崩溃，从而使其行为正常化

我要补充：

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

.two:after {
     clear: both;
}

看到这个fiddle。这是我用过的 Nicholas Gallagher clearfix。

【讨论】：

【解决方案4】：

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

试试这个：

p 
{ 
    margin: 0px; 
}

【讨论】：