How to get rid of extra space below svg in div element
css, html, svg
Solution
You need `display: block;` on your `svg`.
<svg style="display: block;"></svg>
This is because inline-block elements (like `<svg>` and `<img>`) sit on the text baseline. The extra space you are seeing is the space left to accommodate character descenders (the tail on 'y', 'g' etc).
You can also use `vertical-align:top` if you need to keep it `inline` or `inline-block`
Problem
Here is an illustration of the problem (tested in Firefox and Chrome): ``` <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> ``` View on JSFiddle Notice the extra `red` space inside the `div` below the blue `svg`. Already tried setting `padding` and `margin` of both elements to `0`, but with no luck.