title: Why is that when I apply a margin to a child div tag, it affects the parent div tag is CSS?
body: <p>I have the following code and I am wondering why is that when I apply <code>margin-top: 100px;</code> to the logo id it affects the wrapper div tag in that it also <code>inherits</code> a <code>margin-top</code> of 100px however if I apply a <code>padding-top</code> it works the way I intend it to work. </p>
  
  <p><strong>CODE</strong>
  </p>
  
  <p>
      
          
          </p>
  
  <pre><code>    &lt;meta name="keywords" content="" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="author" content="" /&gt;
  
      &lt;link rel="icon" type="image/png" href="" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="all" href="" /&gt;
  
      &lt;style type="text/css" media="all"&gt;
  
          * {
              margin: 0px;
              padding: 0px;
          }
  
          body {
              font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
              font-size: 1em;
              font-style: normal;
              font-color: normal;
              color: #ffffff;
          }
  
  
          #wrapper {
              background-color: #018eb9;
              width: 100%;
              height: 300px;
          }
  
          #innerwrapper {
              width: 600px;
              margin: 0px auto;
          }
  
          #logo {
              padding-top: 100px;
          }
  
          #menu  li {
              display: inline;
          }
  
      &lt;/style&gt;
  
      &lt;title&gt;Sample&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="innerwrapper"&gt;
              &lt;div id="logo"&gt;logo&lt;/div&gt;
              &lt;div id="menu"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;home&lt;/li&gt;
                      &lt;li&gt;about&lt;/li&gt;
                      &lt;li&gt;faq&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>As requested the markup that is <code>causing</code> the issue is</p>
  
  <pre><code>#logo {
   padding-top: 100px;
  }
  </code></pre>
  
  <p>So if I change <code>padding-top</code> to <code>margin-top</code>, you'll notice the background color move down 100px</p>
  
  <p><strong>Further Editing</strong></p>
  
  <p>In light of the responses regarding vertical margin collapsing from everyone I found an excellent guide for beginners like myself at <a href="http://www.howtocreate.co.uk/tutorials/css/margincollapsing" rel="nofollow">http://www.howtocreate.co.uk/tutorials/css/margincollapsing</a></p>