title: Adjusting the margin-top of a div inside of a container div pushes both the inner div and container div down from body
body: <p>I feel like this must be an issue of me doing something silly, but I can't figure it out. <a href="http://boxofbaskets.com/html/demo.html" rel="noreferrer">Here's a demo page showing my problem.</a> The source of the page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;demo&lt;/title&gt;
      &lt;style type='text/css'&gt;
          body{
              margin: 0px;
              padding: 0px;
          }
          #container{
              height: 100%;
              background-color: black;
          }
          #logo{
              margin: 25px auto auto auto;
              width: 360px;
              height: 45px;
              background-color: goldenrod;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='container'&gt;
          &lt;div id='logo'&gt;
              &lt;p&gt;logotext.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So the more you adjust the top value of margin, the further down the page both #logo and #container get dragged. #container should stay put and #logo should be shifting down the page.</p>