title: how to add space at top of page
body: <p>I am learning to make a simple page using html and css and the page looks like this <a href="http://imgur.com/sRzl7" rel="nofollow">http://imgur.com/sRzl7</a><br>
  however the bigbox is too close to the top.  </p>
  
  <p>how to add some margin or spaces on top of it, other than using line breaks <code>&lt;br&gt;</code>  </p>
  
  <p>here is my CSS</p>
  
  <pre><code>root { 
  display: block;
  }
  body {
  background-color: #586B5E;
  }
  .bigbox {
  margin-left:auto;
  margin-right:auto;
  width:780px;
  height:560px;
  background-color:#AFBCAC;
  border: 1px solid #AFBCAC;
  padding: 5px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
  box-shadow: 0px 0px 20px #CCD9C8;
  -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, transparent), to(rgba(255,255,255,0.2)));
  }
  </code></pre>
  
  <p>and here is my HTML</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;Surat v0.1&lt;/title&gt;
    &lt;link rel="stylesheet" href="style/main.css" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div class="bigbox"&gt;
     &lt;/div&gt;
       &lt;?php
       // put your code here
       ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>