我有非常简单的开始代码:
<!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 的整个空间。分区这很清楚。
我想设置为.master div将边距设置为 20px，这样我就可以这样做:
.master div {
background: red;
margin: 20px;
}
但我希望我的 div 都可见(红色和绿色)，但实际上只有红色可见，绿色仅在左侧和右侧可见 - JsFiddle .
我知道如何解决它(在这种情况下，我可以将 .master div 的填充设置为 20px 我可以这样做:
.master {
padding: 1px 0;
}
我将获得与 JsFiddle 中看到的相同效果(或几乎相同的效果 - 1px 差异)或者我可以为 .master 设置填充div 而不是使用内部 div 的边距
问题:
为什么简单地为内部 div 添加边距并不能使边距按预期设置(绿色和红色都可见)，为什么添加甚至很小的填充可以修复它？
为什么上边距和下边距以及左边距和右边距的行为不同？
此问题有名称吗？
还有其他常见的跨浏览器解决方案吗？
如果外部源中有解释，您还可以添加外部资源的链接。
我有点羞于问这么简单的事情，但我总是使用简单的填充来解决这个问题(如问题所示)并且它有效。
最佳答案
此效果是由于“折叠边距”规范造成的。这是 W3C 的解释:
“In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”
边距折叠仅在相邻或嵌套元素上出现垂直边距时发生。
您的问题的答案:
向内部 div 添加边距会导致边距与外部 div 的边距折叠。它们合并为一个边距。设置
padding外部 div 为它提供了 block 格式上下文并分隔元素，因此不会折叠边距。边距折叠仅发生在垂直边距上。
该效果称为“折叠边距”。
唯一的跨浏览器“解决方案”是通过添加填充或
overflow: auto为父元素提供 block 格式化上下文。/hidden.
关于html - 内部元素中顶部/底部和左侧/右侧的 CSS 边距差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24909617/