title: height of html with body and default margin on chrome
body: <p>As you might know, Chrome has a default body margin of <strong><code>8px</code></strong>.</p>
  
  <p>However, this poses an issue when I keep the margin on the body and set its height to <strong><code>100%</code></strong> (along with html at <strong><code>100%</code></strong>). It takes the height of html and places it after the top margin of <strong><code>8px</code></strong>, and ends with a bottom margin of <strong><code>8px</code></strong>. However the html size doesn't adapt to the 16 pixel difference (top 8 + bottom 8). </p>
  
  <p>I'm thinking this has to do with how the document flow works, html having its size assigned before body does, but I do not have any clue how to fix issue.</p>
  
  <p>The only way I thought I could fix this was to do  <code>calc()</code> notation on the html height attribute: <code>height: calc(100% + 16px)</code> but doesn't work. If you know why it doesn't I would like to be told.</p>
  
  <p>code to replicate the issue:</p>
  
  <p>CSS</p>
  
  <pre><code>html {
  height: 100%;
  background: rgb(42,69,66);
  background:  -webkit-linear-gradient(top, rgba(73,94,8,1) 0%, rgba(145,232,66,1) 100%) no-repeat;
  }
  
  body {
      height:100%;
  }
  
  .divz {
      background-color: olive;
      height: 100%;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
     &lt;div class="divz"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/nd1hhz6q/" rel="nofollow">Here is a jsfiddle</a> that replicates the issue. Notice at the bottom how theres a <strong><code>16px</code></strong> spacing between the end of the page and the end of html. </p>
  
  <p><strong>EDIT:</strong> I want the margin to stay on body.</p>
  
  <p><strong>EDIT 2:</strong> another thing I attempted is to set the <code>min-height: 100%</code> to the <code>html</code>, which does do what I want but setting <code>min-height: 100%</code> to <code>body</code> doesn't work if it is set to html.</p>