Vertical margins do not overlap

Question

Vertical margins by default do overlap, for instance if I have one div with bottom margin set to 20px, and the next div top margin to 30px the space between the two div`s should be 30px.

Im my case they do not overlap:

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

And you want them to overlap? – Huy Phạm Mar 08 '22 at 10:27 — Huy Phạm, Mar 08 '22 at 10:27

score 2 · Accepted Answer · answered Mar 08 '22 at 10:41

That's because margin collapse only happens vertically. By setting display: inline-block, this breaks the rule since the lower element may try to stick with the element above it.

More information can be found at here.

Could you show a specific problem so we can tackle it together?. Since styling display: inline-block; with width: 100% doesn't make any sense

#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

1 Answers1