title: Remove top and bottom body margins
body: <p>In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the same styles.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Google&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="stylesheet.css" /&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="pageWrapper"&gt;
  
          &lt;div id="topBar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;+Tomasz&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Grafika&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- end of topBar --&gt;
  
          &lt;div id="middleBar"&gt;
              &lt;div id="centerBox"&gt;
                  &lt;img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" /&gt;
                  &lt;input type="text" size="80" /&gt;
                  &lt;span id="countryName"&gt;Polska&lt;/span&gt;
                  &lt;div id="centerBoxButtons"&gt;
                      &lt;div class="button"&gt;Szukaj w Google&lt;/div&gt;
                      &lt;div class="button"&gt;Szczęśliwy traf&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt; &lt;!-- end of centerBox --&gt;
          &lt;/div&gt; &lt;!-- end of middleBar --&gt;
  
          &lt;div id="bottomBar"&gt;
          &lt;/div&gt; &lt;!-- end of bottomBar --&gt;
  
      &lt;/div&gt; &lt;!-- end of pageWrapper --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>html {
      background-color: #fff;
      padding: 0px;
      margin: 0px;
      height: 100%;
  }
  
  body {
      padding: 0px;
      margin: 0px;
  }
  
  #pageWrapper {
      font-family: Tahoma, Arial, sans-serif;
      color: rgb(64,64,64);
      font-size: 0.85em;
      margin: 0px;
      padding: 0px;
  }
  
  a:link, a:visited {
      text-decoration: none;
      color: rgb(64,64,64);
  }
  
  a:active, a:hover {
      text-decoration: underline;
      color: rgb(64,64,64);
  }
  
  #topBar {
      width: 100%;
      height: 60px;
      background-color: yellow;
      line-height: 60px;
      text-align: right;
      margin: 0px;
      padding: 0px;
  }
  
  #topBar ul {
      list-style-type: none;
  }
  
  #topBar ul li {
      display: inline;
      margin: 0px 10px 0px 0px;
  }
  
  #middleBar {
      width: 100%;
      /*border: solid 2px black; /*----------delete this later*/
  }
  
  #centerBox {
      margin-top: 125px;
      margin-left: auto;
      margin-right: auto;
      width: 600px;
      height: 200px;
      /*border: solid 2px red; /*--------------delete later*/
  }
  
  #centerBox img {
      width: 269px;
      height: 95px;
      margin: 0px 166px 0px 166px;
  }
  
  #centerBox input[type="text"] {
      margin: 20px 0 0 0;
      padding: 0;
      height: 25px;
  
  }
  
  #countryName {
      font-size: 1.2em;
      font-weight: bold;
      color: grey;
      position: relative;
      bottom: 75px;
      left: 380px;
  }
  
  #centerBoxButtons {
      width: 250px;
      /*border: solid 2px blue; /*--------------delete later*/
      margin-left: 175px;
  }
  
  .button {
      font-weight: bold;
      background-color: rgb(240,240,240);
      border: solid 1px rgb(150,150,150);
      padding: 6px;
      font-size: 0.78em;
      display: inline;
      margin-left: 15px;
      border-radius: 4px;
  }
  
  .button:active {
      position: relative;
      top: 1px;
      left: 1px;
  }
  </code></pre>