我有一个场景，我有多个 DIV 与 margin-top 和 margin-bottom 堆叠在一起，但我发现当我有 margin-top 时，margin-bottom 被忽略。我无法解释这是如何发生的。
html
<div class='box'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
</div>
css
.box{
width:100%;
height:300px;
}
.item{
list-style: none;
display:block;
margin-top:20px;
margin-bottom:20px;
width:100%;
height:50px;
background-color:red;
}
如果我将项目设置为 float:left，则它可以正确禁用 margin-bottom。
CSS 通过 div 向左浮动
.item{
list-style: none;
float:left;
display:block;
margin-top:20px;
margin-bottom:20px;
width:100%;
clear:both;
height:50px;
background-color:red;
}
这是jsfiddlelink http://jsfiddle.net/mochatony/5bgkG/19/为了更好地说明它。使用 Chrome 和 Firefox 进行测试。有人可以解释它是如何发生的吗？
详细说明我的有点简洁的评论：
想象一下你有这样的代码：
<body>
<p>A paragraph</p>
<p>Another paragraph</p>
<p>A final paragraph</p>
</body>
你的 CSS 是：
p {
margin-top: 10px;
margin-bottom: 10px;
}
如果边距折叠没有发生，您最终会在顶部得到 10 像素的边距，在底部得到 10 像素的边距，但是20段落之间的像素边距通常不是所需要的。
为了解决这个问题，浏览器将顶部和底部边距相互折叠，以便段落（或任何其他块级元素）之间的间隙等于顶部和底部边距中的较大者。
这就是您的代码所发生的情况。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
