title: Spurious margin on svg element
body: <p>I have a very simple document (see also <a href="http://jsfiddle.net/6K7EX/">JSFiddle</a>):</p>
  
  <pre><code>&lt;style&gt;
  html, body, svg, div {
      margin: 0;
      padding: 0;
      border: 0;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;svg id="foo"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     style="width: 768px; height: 1004px;"&gt;
  &lt;/svg&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>For some reason, the <code>svg</code> element gets a 3px or 4px bottom margin (that is, the <code>body</code> element gets a height of 1007px, 1008px or even 1009px; the <code>svg</code> margin itself is 0 when inspected using the browser debug tools.)</p>
  
  <p>If I replace the <code>svg</code> with a <code>div</code>, the spurious margin disappears. The behavior is consistent across Opera 12, Chrome 33, Firefox 26 and Internet Explorer 11, so I'm confident that the behavior is by design and standards compliant, <em>I just don't get it</em>.</p>