title: CSS - why does margin-top change the parent divs margin top?
body: <p>This is my html:</p>
  
  <pre><code>&lt;div id="Header"&gt;
      &lt;div id="logoContainer"&gt;
          &lt;p id="welcome"&gt;Welcome&lt;/p&gt;
          &lt;h1 class="logoText"&gt;first&lt;img id="logoImage" src="image.jpeg" /&gt;&lt;span id="second"&gt;second&lt;/span&gt;&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS:</p>
  
  <pre><code>#Header {
      font-family: consola;
      width: 100%;
      height: 50px;
      background-color: black;
      color: white;
  }
  
  #logoContainer {
      height: 50px;
      width: 200px;
      background-color: red;
  }
  
  #welcome {
      font-weight: 500;
      font-size: 8px;
      margin-bottom: -6px;
  }
  
  #logoImage {
      width: 14px;
      vertical-align: -4px;
      padding-left: 5px;
      padding-right: 5px;
  }
  
  .logoText {
      font-size: 12px;
      font-weight: 500;
  }
  
  
  #second {
      font-weight: 500;
  }
  </code></pre>
  
  <p>Now, when I change </p>
  
  <pre><code>#logoContainer
  </code></pre>
  
  <p>to </p>
  
  <pre><code>#logoContainer {
      height: 50px;
      width: 200px;
      background-color: red;
      margin-top: 100px; // add a margin-top of 100px
  }
  </code></pre>
  
  <p>the </p>
  
  <pre><code>#Header
  </code></pre>
  
  <p>and the </p>
  
  <pre><code>#logoContainer
  </code></pre>
  
  <p>get a margin-top of 100px</p>
  
  <p>. How do I just give </p>
  
  <pre><code>#logoContainer
  </code></pre>
  
  <p>a margin-top of 100px?</p>