title: Odd margins on SVG Element
body: <p>I have a simple SVG element with height and width equal to <code>80%</code>. I am also applying a margin of <code>10%</code> to the element to center the SVG on the page. However, for some odd reason, the margin seems to be creating a <code>y-overflow</code> so that the page is scrollable. This doesn't make much sense as I am applying styles that should add up to no more than <code>100%</code> vertically and horizontally. Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {height: 100%;}
  
  * {
    margin: 0;
    padding: 0;
  }
  
  svg {
    margin: 10%;
    height: 80%;
    width: 80%;
    background: #ddd;
  }
  
  svg path {
    fill: none;
    stroke: #000;
    stroke-linejoin: round;
    transition: 0.2s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 40 40"&gt;
    &lt;path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Essentially, I want the SVG to be centered with percent margins, and I don't want the body to be scrollable.</p>
  
  <p>Thanks in advance!</p>