title: Impact of border property on top margin
body: <p>Refer to the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 500px;
    width: 80%;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background-color: lightgray;
  }
  .header {
    width: 80%;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
    /* border: solid 1px black; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I remove <code>border: solid 1px black</code> from .header I get some space above div element. But when I add the border property I get the perfect results (that is space removed). What should be impact of border property on this space?</p>