css - 垂直边距不重叠

Question

默认情况下，垂直边距会重叠，例如，如果我有一个 div 的底部边距设置为 20 像素，而下一个 div 顶部边距设置为 30 像素，则两个 div 之间的空间应为 30 像素。

就我而言，它们不重叠:

#contentwrap {
    margin-bottom: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}
#pagenavi {
    display: inline-block;
    margin-top: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}

<div id = "contentwrap"></div>
<div id = "pagenavi"></div>

Answer 1

这是因为边距折叠仅发生在垂直方向。通过设置 display: inline-block，这会打破规则，因为下面的元素可能会尝试与上面的元素粘在一起。

更多信息请访问 here .

您能否展示一个具体问题，以便我们共同解决？由于使用 width: 100% 设置 display: inline-block; 的样式没有任何意义

#contentwrap {
    margin-bottom: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}
#pagenavi {
    margin-top: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}

<div id = "contentwrap"></div>
<div id = "pagenavi"></div>