title: Strange CSS Behaviour, white space on top of body
body: <p>I have such a DOM in my website:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div id='topbar'/&gt;
          &lt;div id='centerframe'/&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>with the css rules:</p>
  
  <pre><code>html
  {
      margin:0;
      padding:0;
  }
  
  body
  {
  
      background:url('/images/brickwall.jpg'); background-size: 10%;
      width:100%; 
      height:100%;
      margin:0;
      padding-top:0;
  }
  
  div#centerframe
  {
  
      background:rgba(255, 255, 255, 0.85);
      box-shadow:0em 0.5em 2em 0.3em;
      padding:90px;
      margin-left:        180px;
      margin-right:       160px;  
      margin-top:         200px; /* this also causes body to slide down 200px , when body{padding-top:0} . why ? */
  
  }
  
  #topbar
  {
      position:fixed;
      display:block;
      float:left;
      width:100%;
      height:80px;
      top:0;
      margin-top:0%;
      background:rgba(0,0,0,1);
  }
  </code></pre>
  
  <p>and this css causes such a problem: body has a margin on top, even though i told it to <code>margin:0;</code> here's the screen cap:
  <img src="https://i.stack.imgur.com/dkh1l.png" alt="problem"></p>
  
  <p>but when I change the css, and make <code>body{padding-top: 1px;}</code> (instead of 0), it works as it should. see the screen cap:
  <img src="https://i.stack.imgur.com/zK1jt.png" alt="normal"></p>
  
  <p>It also works when I add this rule: <code>#centerframe{float:left;}</code> but it causes other problems, like expanding to more than 100% width.</p>
  
  <p>Anyway, so I solved the problem with a 1px padding. But why the problem was there at the first place?</p>
  
  <p>How can a child of <code>&lt;body/&gt;</code> change its top margin?</p>
  
  <p>Thanks !</p>