0

Possible Duplicate:
For what reason margin collapse rules were introduced in CSS?

What is the means of "margin collapse"?

Community
  • 1
  • 1
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

1 Answers1

4

It's not a problem, it's a design decision. It means: when adjacent elements have margins that "touch", the two margins are collapsed into the same space. So for example:

_____
| A |    Element A has 20-px bottom margin
|___|

        <-- space between elements is 20, not 40
_____
| B |    Element B has 20-px top margin
|___|

The margins are "collapsed" together. The CSS specification requires browsers to behave this way by design. It is actually a Good Thing and helpful, once you understand when and how it is happening.

Rex M
  • 142,167
  • 33
  • 283
  • 313
  • Why is it a Good Thing? I think that was what the original question was getting at.. – Magne Jan 04 '12 at 14:34
  • @Magne the reason is scalability of design. The true power of CSS starts to show when we use it to write general-purpose rules about how certain *kinds* of elements should display, without knowing precisely how those elements will be arranged on a particular page. The purpose of margin is to create a **gutter** between elements. In design specifications it is common to say a gutter should be precisely (x) pixels - so collapsing ensures that properly-designed margins on unpredictable element arrangements will never exceed the desired gutter size. – Rex M Jan 04 '12 at 15:38
  • Thanks for pointing out the generalizability aspect. I can see that's a good thing. I'm just annoyed by the fact that one still has to know precisely how some elements are arranged on a particular page, since the collapsing of margins is dependent on the nearby elements (i.e. inline-blocks vs blocks). – Magne Jan 04 '12 at 17:22
  • @Magne if margin collapsing is a problem for you, that generally means you are expecting adjacent elements' margin to "push each other apart", which means you are using margin incorrectly. That should be accomplished with padding. – Rex M Jan 04 '12 at 20:54