Question

我有一个场景，我有多个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 by div left left

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

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

Answer 1

详细阐述我的一些简短评论：

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

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

要解决此问题，浏览器会将顶部和底部边距相互折叠，因此段落（或任何其他块级元素）之间的间隙等于顶部和底部边距中的较大者。

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

当Margin-Top存在时，CSS - Margin-Bottom被忽略

1 个答案: