title: With CSS3, how should we use the new unit vh, vw, and with the body margin considered?
body: <p>In CSS3, there are these 2 new units: <code>vh</code> and <code>vw</code>.  So we can use </p>
  
  <pre><code>height: 80vh;
  width: 60vw;
  </code></pre>
  
  <p>to scale a block that is 80 percent viewport height, or 60 percent viewport width.</p>
  
  <p>But I think typically, the default <code>body</code> element has a <code>8px</code> margin at all 4 sides, so how should we incorporate this into our use of <code>vw</code>, and <code>vh</code> if we do need to use <code>100vh</code> and <code>100vw</code> (or almost that amount to cover up the width and height, but work with the body's margin)?  Some options include (1) resetting body margin to <code>0</code>, (2) resetting body margin to <code>8px</code> (so to make sure it is the same across all browsers (3) use <code>height: calc(100vh - 8px)</code> and <code>width: calc(100vw - 16px)</code> to set the proper height and width... but the <code>8px</code> and <code>16px</code> seem too hardcoded.  What might be good practices to handle this?</p>