title: margin on h1 element inside a div
body: <p>I have a div container which has a h1 element within it:</p>
  
  <pre><code>&lt;div id="header"&gt;
   &lt;h1&gt;Enlighten Designs&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have applied a margin-top,a margin-left and a margin-right to the header element.
  However the margin-top is not being applied to the header element box wrt to the containing div.
  Instead the top margin is being applied to the containing div.
  The left and right margins of the header are being applied to the header element box wrt the containing div.</p>
  
  <p>The style rules for the div and header are as follows:</p>
  
  <pre><code>#header {
      background: blue;
      height: 150px;
  }
  h1{
      background: orange;
      margin-top:30px;
      margin-left: 10px;
      margin-right: 10px;
  }
  </code></pre>
  
  <p>What is the reason for this behavior?</p>