title: Margins and background colors/images on <body> element
body: <p>I've been messing around and creating mock websites to get the hang of HTML and CSS. I'm new fairly new to web development, so please excuse if this question is a bit basic. I've searched around, but haven't come across the answer.</p>
  
  <p>When messing around with background colors and images, I noticed that if I placed a background image or color on the body, it expanded to the full width and height of the page, even though the body element only took up a much smaller space. It doesn't seem to matter whether the height or width are declared either.</p>
  
  <p>Furthermore, I noticed the background image expands into the margins of the body element as well, which doesn't happen on any other elements. My question is: why does this happen to the body element, and does it only apply to the body element? It seems confusing that every element would follow the same set of rules except for some.</p>
  
  <p>Here's the code I've been using:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Home | Test Website&lt;/title&gt;
      &lt;meta name="description" content="This is a test website for learning HTML and CSS" /&gt;
      &lt;meta name="author" content="Tom" /&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta lang="en-us" /&gt;
      &lt;style&gt;
          body {
              font-family: Helvetica, sans-serif;
              background-color: #109372;
              padding: 0px;}
          .container {
              width: 960px;
              margin: 0 auto;}
          header {
              background-color: #d012d5;
              margin-top: 0px;}
          header h1 {
              font-size: 200%;
              font-weight: bold;
              margin-top:0px;}
          header h2 {
              font-size: 150%;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;
              &lt;h1&gt;This is a website!&lt;/h1&gt;
              &lt;h2&gt;This is a tagline!&lt;/h2&gt;
          &lt;/header&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for any help! : )</p>