7

I have long noticed that when two block elements are put next to each other, their margin stacks on each other. Something like this:

enter image description here

Both <div>s have margin: 1em, but when margin1's margin-bottom collides with margin2's margin-top, both margin just stack on each other. See on here: http://jsfiddle.net/39XmC/

What I was expecting was something like this:

enter image description here

Both <div>s actually give spaces on each margin and doesn't stack on each other's margins.

I know that this can be fixed by floating or overflowing the element. My question:

  1. Why does this happen [theoretically]? Isn't margin not supposed to stack?
  2. Is this the default behavior on browsers? Because I remember working on a project that doesn't have this behavior.
deathlock
  • 2,756
  • 5
  • 27
  • 48

3 Answers3

9

That behavior is normal and it's called as Collapsing Margins..

Quoting from W3C:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, except:

  • Margins of the root element's box do not collapse.
  • If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
6

As for the why this happens...

Margins aren't about sizing the element; they're only about breathing room. (You may notice that even box-sizing won't let you consider the margin as part of the element's size. Because it's not.)

A margin of 1em means "I need at least 1em of space around myself to not look crowded." If you have two elements next to each other that both say they want at least 1em of space, then spacing them 1em apart satisfies both conditions while wasting the minimum amount of space. The rules for collapsing margins make a lot more sense if you keep this in mind.

Eevee
  • 47,412
  • 11
  • 95
  • 127
  • 1
    Indeed, and this is why even something like a `box-sizing: margin-box` property wouldn't make sense [if one were to propose it](http://stackoverflow.com/questions/10808413/css3-box-sizing-margin-box-why-not). – BoltClock Nov 05 '13 at 07:54
  • Prior to this, I always thought margin as a part of the element itself. As this behavior (margin collapses) changes when the parent is overflowed or the element itself is floated. Why is it? – deathlock Nov 05 '13 at 13:03
  • because floats are weird? :) i assume it's because the edges of a floated element often end up _inside_ another element, so the very idea of collapsing margins kinda goes out the window – Eevee Nov 05 '13 at 18:04
  • You could add "overflow:hidden" to the wrapper of the floating elements to make margins work on them... also weird but will accually work as a "clear-fix" for them – Johan Jun 21 '19 at 06:46
3

Its a property of CSS. Please refer this one

When you have 

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 40px 0 25px 0;
  background: #cfc;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

And html as 

<h1>Heading Content</h1>
<div>
  <p>Paragraph content</p>
</div>

The margin top of the paragraph will be 40px and not 60px.

Marikkani Chelladurai
  • 1,430
  • 1
  • 13
  • 23