1

我有一个场景，我将多个 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;
}

如果我将项目设置为浮动：左，那么它能够正确禁用边距底部。

CSS by div 向左浮动

.item{
    list-style: none;
    float:left;
    display:block;
    margin-top:20px;
    margin-bottom:20px;
    width:100%;
    clear:both;
    height:50px;                
    background-color:red;
}     ​

这是 jsfiddle链接以更好地说明它。用chrome和firefox测试。有人可以解释它是如何发生的吗？

4

1 回答 1

2

详细说明我有点简洁的评论：

想象一下你有这样的代码：

<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像素，这通常不是必需的。

为了解决这个问题，浏览器将顶部和底部边距折叠在一起，因此段落（或任何其他块级元素）之间的间隙等于顶部和底部边距中较大的一个。

这就是您的代码所发生的情况。

于 2012-08-18T17:46:55.130 回答