title: Margin stacks on each other?
body: <p>I have long noticed that when two block elements are put next to each other, their margin stacks on each other. Something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/amwJc.png" alt="enter image description here"></p>
  
  <p>Both <code>&lt;div&gt;</code>s have <code>margin: 1em</code>, but when <code>margin1</code>'s <code>margin-bottom</code> collides with <code>margin2</code>'s <code>margin-top</code>, both margin just stack on each other. See on here: <a href="http://jsfiddle.net/39XmC/" rel="noreferrer">http://jsfiddle.net/39XmC/</a></p>
  
  <p>What I was expecting was something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/sI4ED.png" alt="enter image description here"></p>
  
  <p>Both <code>&lt;div&gt;</code>s actually give spaces on each margin and doesn't stack on each other's margins.</p>
  
  <p>I know that this can be fixed by <a href="http://jsfiddle.net/39XmC/1/" rel="noreferrer">floating</a> or overflowing the element. My question:</p>
  
  <ol>
  <li>Why does this happen [theoretically]? Isn't margin not supposed to stack?</li>
  <li>Is this the default behavior on browsers? Because I remember working on a project that doesn't have this behavior.</li>
  </ol>