When two margins are touching each other vertically, they are collapsed. When two margins touch horizontally, they do not collapse.

Example of adjacent vertical margins:

Consider the following styles and markup:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

They will be 10px apart since vertical margins collapse over one and other. (The spacing will not be the sum of two margins.)

Example of adjacent horizontal margins:

Consider the following styles and markup:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

They will be 20px apart since horizontal margins don’t collapse over one and other. (The spacing will be the sum of two margins.)

Overlapping with different sizes

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

These elements will be spaced 15px apart vertically. The margins overlap as much as they can, but the larger margin will determine the spacing between the elements.

Overlapping margin gotcha

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

What will be the spacing between the two texts? (hover to see answer)

!The spacing will be 25px. Since all four margins are touching each other, they will collapse, thus using the largest margin of the four.