CSS Margin Collapsing

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:

Margin collapsing tutorial

The result will be the following:

Margin collapsed

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:

Margin collapsing inside divs

and the displayed result will be the following:

Margin collapsed in inner divs

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!

Share
Tagged with: boxCSSmarginstutorial
 

2 Responses to “CSS Margin Collapsing”

    I bookmarked it so I can see your new posts.

  1. I bookmarked it so I can see your new posts.

  2. -->

Leave a Reply