title: Problem with transparent margin
body: <p>Here is my CSS (simplified):</p>
  
  <pre><code>body {
      background: url('bg.gif') left top;
  }
  #content {
       background: #ddd;
  }
  .box {
      overflow: hidden;
      margin-top: 10px;
      background: #1e1e1e url('left-bottom-corner.gif') left bottom no-repeat;
  }
  </code></pre>
  
  <p>And the markup:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div class="box"&gt;
          &lt;p&gt;lorem ipsum&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the problem. In the place where the .box has 10px top margin, the background of #content div is not visible, instead, the background of the body is visible.</p>
  
  <p>I cannot use padding because I need to style the .box divs to have round borders and their own background, so I have to use margin.</p>
  
  <p>How can I fix this incorrect behaviour?</p>