CSS Margin Collapsing

css margin
public static picture public static · Sep 19, 2008 · Viewed 18.3k times · Source

So essentially does margin collapsing occur when you don't set any margin or padding or border to a given div element?

Answer

Jim picture Jim · Sep 19, 2008

No. When you have two adjacent vertical margins, the greater of the two is used and the other is ignored.

So, for instance, if you have two block-display elements, A, followed by B beneath it, and A has a bottom-margin of 3em, while B has a top-margin of 2em, then the distance between them will be 3em.

If you set a border or padding, this prevents the collapsing from occurring. In the above example, the distance between the two elements will then be 5em.

If you don't set any margins, then there won't be any margins to collapse. It has nothing whatsoever to do with the element type in use - it is applicable to all element types, not just <div> elements.

Read the CSS 2.1 specification for more details.

Related questions

When to use margin vs padding in CSS

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More
Why can't I center with margin: 0 auto?

I have a #header div that is 100% width and within that div I have an unordered list. I have applied margin: 0 auto to the unordered list but it won't center it within the header div. Can anybody please tell me …

Read More