Hi,
So essentially does margin collapsing occur when you don't set any margin or padding or border to a given div element?
+1
A:
"the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."
Chris Serra
2008-09-19 15:20:08
+8
A:
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.
Jim
2008-09-19 15:21:41
Will upvote the answer, given a few changes:1. In the '3em/2em' example, you might want to use absolute units instead; in this case, the 2em /could/ be greater than the 3em2. "If you set a border or padding ..." - this is only true in certain cases, not in the standard 'A followed by B' one
Bobby Jack
2009-01-15 11:56:31
3. "If you don't set any ..." conventionally true for DIVs but margin-collapsing WILL affect most elements by default
Bobby Jack
2009-01-15 11:58:05