'Vertical margins do not overlap [duplicate]

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions