title: CSS: Heading margin in div
body: <p>HTML/CSS newbie here. I want to create a div (in blue), with an h1 at the top (in red). The h1 should have a margin of 30px all around. Below h1 is another div (in green). The following code "should" work, but the result I get is that h1 only has a 30px margin on the left, bottom and right. The top has no margin. Why is this?</p>
  
  <p>To see what I mean, you can try this code out at <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_default" rel="nofollow">http://www.w3schools.com/css/tryit.asp?filename=trycss_default</a></p>
  
  <p>Thank you!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  body
  {
  padding:0px;
  margin:0px;
  color: rgb(0,0,0);
  }
  
  div#frame1
  {
  padding:0px;
  margin:50px auto;
  width:500px;
  background-color: rgb(0, 0, 255);
  }
  
  h1
  {
  padding:0px;
  margin:30px;
  text-align:center;
  background-color:rgb(255, 0, 0);
  }
  
  div#frame2
  {
  padding:0px;
  margin:0px;
  background: rgb(0, 255, 0);
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="frame1"&gt;
  
  &lt;h1&gt;Hello world&lt;/h1&gt;
  
  &lt;div id="frame2"&gt;
  Hello again
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>