title: CSS margin difference for top/bottom and left/right in inner element
body: <p>I have very simple code for beginning:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style&gt;
  .master {
      background: green;
  }
  .master div {
      background: red;
  }
  &lt;/style&gt;
  &lt;div class="master"&gt;
  &lt;div&gt;
  abc
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I put it also on <a href="http://jsfiddle.net/bgEZ4/" rel="nofollow">JsFiddle</a>. Only inner (red) div is visible because there is no margin or padding set so inner div takes the whole space of <code>.master</code> div. That's clear.</p>
  
  <p>I would like to set for <code>.master div</code> margins to 20px so I could do it this way:</p>
  
  <pre><code>.master div {
      background: red;
      margin: 20px;
  }
  </code></pre>
  
  <p>But I would expect that I have both div visible (red and green) but in fact only red color is visible and green is visible only on left and right - <a href="http://jsfiddle.net/qpm5U/1/" rel="nofollow">JsFiddle</a>.</p>
  
  <p>I know how to solve it (in this case I can set padding for <code>.master</code> div to 20px I could do something like this:</p>
  
  <pre><code>.master {
      padding: 1px 0;
  }
  </code></pre>
  
  <p>and I'll have the same effect (or almost the same effect - 1px difference) as you see at <a href="http://jsfiddle.net/L38cy/1/" rel="nofollow">JsFiddle</a> or I could set padding for <code>.master</code> div instead of using margin for inner div</p>
  
  <p><strong>Questions</strong>:</p>
  
  <ol>
  <li><p>Why simple adding margin for inner div doesn't make that margin is set as expected (both green and red visible) and why adding even small padding fix it?</p></li>
  <li><p>Why behaviour for it is different for top and bottom margin and for left and right margin ?</p></li>
  <li><p>Is this issue has any name?</p></li>
  <li><p>Are there any other common cross-browser solutions?</p></li>
  </ol>
  
  <p>If it is explained in external source you can also add link to external resource.</p>
  
  <p>I'm a bit ashamed that I ask about such simple thing, but I always solve this using simple padding (as showed in the question) and it worked.</p>