title: How to Fix Collapsing Top and Bottom Margins?
body: <p>I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:</p>
  
  <pre><code>.contents {
      ...
      margin: 10px 10px 10px 10px;
  }
  </code></pre>
  
  <p>Example: <a href="http://jsfiddle.net/LCTeU/" rel="nofollow">http://jsfiddle.net/LCTeU/</a></p>
  
  <p>How do I fix this?</p>
  
  <p>Edit:</p>
  
  <p>I've also tried padding the container instead, and that just expands the container to maximum size (why?):</p>
  
  <pre><code>.container {
      ...
      padding: 10px 10px 10px 10px;
  }
  </code></pre>