Maybe many guys out there, when they start to learn how to use CSS, don’t know that 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? simple.. 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..).
This is the case for example of two elements vertically aligned:
The result will be the following:
The same happens if an element is contained into 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!
I bookmarked it so I can see your new posts.