title: CSS - margin top of 50% is more than 50%
body: <p>I want a child div with a op-margin via percentage. The y-position shall be 50% percent of the parent div. But it is somehow more. Why isn't it 50% ?</p>
  
  <p><a href="http://jsfiddle.net/73xkT/4/" rel="noreferrer">js fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;header&gt;&lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.content {
    width: 300px;
    height: 200px;
    background: blue;
    position: relative;
    clear: both;
   }
  
  .content header {
     width: 100px;
     height: 100px;
     margin-top: 50%;
     background: red;
     position: relative;
     float: left;
  }
  </code></pre>