title: CSS - Margin-Bottom ignored when Margin-Top exist
body: <p>I have a scenario where I have multiple DIV stacked together with both margin-top and margin-bottom, but I found the margin-bottom ignored when I have margin-top. I couldn't explain how it happens.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class='box'&gt;
  &lt;div class='item'&gt;1&lt;/div&gt;
  &lt;div class='item'&gt;2&lt;/div&gt;
  &lt;div class='item'&gt;3&lt;/div&gt;
  &lt;div class='item'&gt;4&lt;/div&gt;
  &lt;div class='item'&gt;5&lt;/div&gt;
  &lt;div class='item'&gt;6&lt;/div&gt;
  &lt;div class='item'&gt;7&lt;/div&gt;
  &lt;div class='item'&gt;8&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>css </p>
  
  <pre><code>.box{
      width:100%;
      height:300px;
  
  }
  
  .item{
      list-style: none;
      display:block;
      margin-top:20px;
      margin-bottom:20px;
      width:100%;
      height:50px;                
      background-color:red;
  }
  </code></pre>
  
  <p>If I set the item to float:left, then it able to disable margin-bottom properly.</p>
  
  <p>CSS by div floating left</p>
  
  <pre><code>.item{
      list-style: none;
      float:left;
      display:block;
      margin-top:20px;
      margin-bottom:20px;
      width:100%;
      clear:both;
      height:50px;                
      background-color:red;
  }     ​
  </code></pre>
  
  <p>Here's the jsfiddle <a href="http://jsfiddle.net/mochatony/5bgkG/19/" rel="nofollow">link</a> to illustrate it better. Tested with chrome and firefox. Could someone explain how it happens?</p>