title: giving child div a margin relative to the parent div
body: <p>This is my html:</p>
  
  <pre><code>&lt;div class='parentDiv'&gt;
      &lt;div class='childDiv'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS:</p>
  
  <pre><code>.parentDiv {
      margin-top: 200px;
      width: 700px;
      height: 800px;
      background-color: red;
  }
  
  .childDiv {
      background-color: green;
      width: 50px;
      height: 50px;
      margin-top: 22px;
  }
  </code></pre>
  
  <p>the fiddle: <a href="http://jsfiddle.net/1whywvpa/" rel="noreferrer">http://jsfiddle.net/1whywvpa/</a></p>
  
  <p>How come childDiv does not get the margin-top of 22px? It only gets a margin top if the pixels is greater then the 200px which is already given to the parentDiv. Any way to make the childDiv get a parent div of 22px relative to the parentDiv without doing some type of 'give the parent div a 1px padding' hack?</p>