Collapsing margins

Look at some of these boxes:

margin-bottom: 40px;
margin-top: 40px;
margin-bottom: 10px;
margin-top: 40px;

The distance (or margin) between both pairs of boxes are the same, which means the margins are collapsed.

margin-bottom: 3em;
margin-top: 3em;
margin-bottom: 3em;
margin-top: 1em;

Now with padding

padding-bottom: 40px;
padding-top: 40px;
padding-bottom: 10px;
padding-top: 40px;
padding-bottom: 3em;
padding-top: 3em;
padding-bottom: 3em;
padding-top: 1em;

Home - More stuff