Question

我有非常简单的开始代码：

<!doctype html>
<head>
</head>
<body>
<style>
.master {
    background: green;
}
.master div {
    background: red;
}
</style>
<div class="master">
<div>
abc
</div>
</div>
</body>
</html>

我也把它放在JsFiddle上。只有内部（红色）div是可见的，因为没有边距或填充集，所以内部div占用.master div的整个空间。那很清楚。

我想将.master div页边距设置为20px，这样我就可以这样做：

.master div {
    background: red;
    margin: 20px;
}

但是我希望我有两个div可见（红色和绿色），但实际上只有红色可见，绿色仅在左右可见 - JsFiddle。

我知道如何解决它（在这种情况下，我可以将.master div的填充设置为20px我可以这样做：

.master {
    padding: 1px 0;
}

并且我会在JsFiddle看到相同的效果（或几乎相同的效果 - 1px差异），或者我可以为.master div设置填充，而不是使用内部边距格

问题：

为什么简单地为内部div添加边距并不能使边距按预期设置（绿色和红色都可见）以及添加甚至小填充的原因是什么？
为什么上边距和下边距以及左右边距的行为不同？
这个问题有什么名字吗？
还有其他常见的跨浏览器解决方案吗？

如果在外部源中解释，您还可以添加外部资源的链接。

我有点惭愧，我问这个简单的事情，但我总是用简单的填充解决这个问题（如问题中所示）并且它有效。

Answer 1

这种效果是由于＆＃34;崩溃边缘＆＃34;规格。以下是W3C：

的解释

“在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容，填充或边框区域或间隙将它们分开）结合形成一个边缘。“

仅在相邻或嵌套元素上使用垂直边距进行边距折叠。

您的问题的答案：

向内部div添加边距会导致边距因外部div的边距而崩溃。它们合并为一个边际。在外部div上设置padding会给它一个块格式化上下文并分隔元素，因此不会折叠边距。
保证金折叠仅发生在垂直边距上。
效果称为＆＃34;折叠边距＆＃34; 。
唯一的跨浏览器＆＃34;解决方案＆＃34;是通过添加填充或overflow: auto / hidden为父元素提供块格式化上下文。

See this article on SitePoint for more information

内部元素中顶部/底部和左/右的CSS边距差异

1 个答案: