When two or more vertical margins meet in a layout, they collaps to form a single margin. Which will be the height of this margin? Simply the larger of the two margins.
This is true only for block boxes, in the normal flow of the document (not for inline, floated, absoluted positioned boxes).
Example of two elements vertically aligned:
The result will be the following:
The same happens if an element is contained in another one. If we suppose that we don’t have any border or padding separating the two elements we will have the following:
and the displayed result will be the following:
It may seems a paradox but if we have a single empty element, with no borders and padding, but top and bottom margins, then those margins will collapse also.
And if the resulting collapsed margin is touching another margin of another element we will have another collapsing interaction.