How to get rid of extra space below svg in div element

Question

Here is an illustration of the problem (tested in Firefox and Chrome):

相关标签:

Answer 1

Try adding height:100px to div and using a height="100%" on svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

Answer 2

Change your style to

style="background-color: red; line-height: 0;"

Answer 3

simply add height to main div element

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Answer 4

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

Answer 5

svg is an inline element. inline elements leave white-space.

Solution:

Add display:block to svg, or make height of parent div same as svg.

DEMO here.

Answer 6

Change the display property of the svg to be block.