title: How to get rid of extra space below svg in div element
body: <p>Here is an illustration of the problem (tested in Firefox and Chrome):</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-html lang-html prettyprint-override"><code>&lt;div style="background-color: red;"&gt;&lt;svg height="100px" width="100" style="background-color: blue;"&gt;&lt;/svg&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/EXLSF/" rel="noreferrer">View on JSFiddle</a></p>
  
  <p>Notice the extra <code>red</code> space inside the <code>div</code> below the blue <code>svg</code>.</p>
  
  <p>Already tried setting <code>padding</code> and <code>margin</code> of both elements to <code>0</code>, but with no luck.</p>