当我设置#two为 inline-block 时，它会从中减去 16 px 的顶部/底部边距<p>并将其添加到 div 内容框高度，因此它变为 52px 而不是 20px .. 为什么会这样？
问问题
2919 次
4 回答
6
您所看到的是边缘崩溃的奇怪案例之一。
如果父元素和子元素是块元素并且没有任何东西（填充、边框等）分隔它们的垂直边距，那么这些边距将折叠。折叠边距是指未添加两个相邻边距（如您所料），而是显示两者中较大的一个。在父子情况下，折叠的边距最终在父级之外。您可以在上述链接中的“父母和第一个/最后一个孩子”部分阅读更多详细信息。
将父级设置为inline-block, 或float:left;ing 它或其他一些东西（请参阅链接以获得更完整的列表）将阻止边距折叠。这导致了我们习惯的行为：child 的 margin 会出现在 parent 内部，增加它的总高度，并且 parent 的 margin 也会显示出来。
于 2013-03-05T02:48:28.353 回答
3
详细说明并扩展现有答案..
这种行为称为折叠边距。
在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。以这种方式组合的边距被称为折叠边距，由此产生的组合边距称为折叠边距。
要解决此问题，您需要建立一个新的块格式化上下文：
浮动、绝对定位的元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是“可见”的块框（除非该值已被传播到视口）为其内容建立新的块格式化上下文。
在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。两个同级框之间的垂直距离由 'margin' 属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。
因此，建立新块格式的几种不同方法是......
于 2015-01-06T00:00:14.827 回答
1
这已经得到回答和接受，但我仍然想指出，清除它可以防止保证金崩溃，从而使其行为正常化
我要补充：
.two:before,
.two:after {
content: " ";
display: table;
}
.two:after {
clear: both;
}
看到这个小提琴。这是我用过的 Nicholas Gallagher clearfix 。
于 2013-03-05T03:05:48.793 回答
-1
段落具有内置的边距（在大多数浏览器中）。
试试这个：
p
{
margin: 0px;
}
于 2013-03-05T02:43:40.843 回答