title: Why is there a space between the <body> and the <html> element
body: <p>Why is there a space between the top of the green box and the browser window (in Chrome and Firefox)?</p>
  
  <p>There is an apparent space between the html and body element that I cannot seem to eliminate with the CSS below (and dozens of variations upon it.) there also seems to be some bonus padding on the overall document height, as if some aspect of padding or margin is not being reset to 0.</p>
  
  <p><strong>Helpful tip</strong>: <a href="http://reference.sitepoint.com/css/collapsingmargins" rel="nofollow noreferrer">http://reference.sitepoint.com/css/collapsingmargins</a></p>
  
  <p>I solved this problem by using the following code:</p>
  
  <pre class="lang-css prettyprint-override"><code>div#aiport &gt; *:first-child { margin-top: 0px }
  </code></pre>
  
  <p>while adding</p>
  
  <pre class="lang-css prettyprint-override"><code>overflow: hidden;
  </code></pre>
  
  <p>to the <code>div#airport</code> definition by itself solved the problem <em>correctly.</em> :-)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;bug&lt;/title&gt;
          &lt;link rel="icon" type="image/png" href="bookmarkIcon.png" /&gt;
          &lt;style type="text/css"&gt;
              html {
                  height: 100%;
                  min-height: 100%;
                  padding: 0px;
                  margin: 0px;
              }
              body {
                  margin: 0px;
                  padding: 0px;
                  margin-top: 0px;
                  padding-top: 0px;
                  width: 100%;
                  height: 100%;
                  font-size: 16px;
                  background: #fff;
              }
              div#airport {
                  position: relative;
                  z-index: 1;
                  top: 0px;
                  padding: 0px;
                  padding-top: 0px;
                  margin: 0px;
                  margin-top: 0px;
                  margin-left: auto;
                  margin-right: auto;
                  width: 900px;
                  min-width: 900px;
                  max-width: 900px;
                  background-color: #0f0;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body lang="en"&gt;
          &lt;div id="airport"&gt;
              &lt;p&gt;Platform&lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>