垂直边距不重叠

Question

默认情况下垂直边距会重叠，例如如果我有一个 div 底部边距设置为 20px，下一个 div 顶部边距设置为 30px space两个 div` 应该是 30px。

我的情况是它们不重叠：

#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 找到更多信息。

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

#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>

垂直边距不重叠

Vertical margins do not overlap

css

margin