title: How do I remove the top margin in a web page?
body: <p>I have had this problem with every web page I have created.  There is always a top margin above the 'main container' div I use to place my content in the center of the page.  I am using a css style sheet and have set margins and padding in the body to 0px and set the margin and padding to 0 in the div:  </p>
  
  <pre><code>body{
      margin-top: 0px; 
      margin-bottom: 0px; 
      margin-left: 0px; 
      margin-right: 0px;
      padding: 0;
      color: black; 
      font-size: 10pt; 
      font-family: "Trebuchet MS", sans-serif;
      background-color: #E2E2E2;
  }
  
  div.mainContainer{
      height: auto; 
      width: 68em;
      background-color: #FFFFFF;
      margin: 0 auto; 
      padding: 0;
  }
  </code></pre>
  
  <p>I have looked online many times, but all I can see to do is set these margin and padding attributes.  Is there something else I should be doing?  The margin exists in IE and Firefox.</p>
  
  <p>Here is a more thorough look at the code (it is in the beginning stages of creation, so there isn't much in it...)</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;!-- TemplateBeginEditable name="doctitle" --&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;!-- TemplateEndEditable --&gt;
          &lt;!-- TemplateBeginEditable name="head" --&gt;&lt;!-- TemplateEndEditable --&gt;
          &lt;link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="mainContainer"&gt;
              &lt;p&gt;Here is the information&lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  body{
      margin-top: 0px; 
      margin-bottom: 0px; 
      margin-left: 0px; 
      margin-right: 0px;
      padding: 0;
      color: black; 
      font-size: 10pt; 
      font-family: "Trebuchet MS", sans-serif;
      background-color: #E2E2E2;
  }
  
  /* ---Section Dividers --------------------------------------------------------------*/
  div.mainContainer{
      position: relative; 
      height: auto; 
      width: 68em;
      background-color: #FFFFFF;
      margin: 0 auto; 
      padding: 0;
  }
  
  div.header{
      padding: 0; 
      margin: 0;
  }
  
  div.leftSidebar{
      float: left;
      width: 22%; 
      height: 40em;
      margin: 0;
  }
  
  div.mainContent{
      margin-left: 25%;
  }
  
  div.footer{
      clear: both;
      padding-bottom: 0em; 
      margin: 0;
  }
  
  /* Hide from IE5-mac. Only IE-win sees this. \*/
     * html div.leftSidebar { margin-right: 5px; }
     * html div.mainContent {height: 1%; margin-left: 0;}
  /* End hide from IE5/mac */
  </code></pre>