我尝试在另一个 div 内的 div 上添加 margin 值。除了最高值之外，所有工作都正常，它似乎被忽略了。但为什么呢？
我的预期：
我得到了什么：
代码：
2
951#outer {
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto 0 auto;
display: block;
}
#inner {
background: #FFCC33;
margin: 50px 50px 50px 50px;
padding: 10px;
display: block;
}
<div id="outer">
<div id="inner">
Hello world!
</div>
</div>
W3Schools 没有解释为什么 margin 会出现这种情况。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
尝试在内部
div上使用display: inline-block;。就像这样：#outer { width:500px; height:200px; background:#FFCCCC; margin:50px auto 0 auto; display:block; } #inner { background:#FFCC33; margin:50px 50px 50px 50px; padding:10px; display:inline-block; }您实际上看到的是
#inner元素的上边距 折叠到#outer元素的上边缘，仅保留#outer边距完好无损（尽管图像中未显示） 。两个盒子的顶部边缘彼此齐平，因为它们的边距相等。以下是 W3C 规范中的相关要点：
您可以执行以下任一操作来防止边距折叠：
上述选项防止边距折叠的原因是：
左右边距的表现符合您的预期，因为：