CODEWITHSUNDEEP
htmlcsssvg
Daniel
Daniel

Reputation: 3711

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

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.

Upvotes: 150

Views: 72345

Answers (9)

JShobbyist
JShobbyist

Reputation: 600

There is an easy way to do it. : )

display: flex will work either. add display: flex; in the div element.

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

Upvotes: 2

Angelo Lucas
Angelo Lucas

Reputation: 637

Another alternative is to add font-size: 0 to the SVG parent.

Upvotes: 13

Jamie
Jamie

Reputation: 4345

If you're setting the height on your SVG, and you want the <a> tag to wrap around your SVG:

  • add height: fit-content; to the <a>
  • add display: block; to the SVG

Upvotes: 2

jcdsvg
jcdsvg

Reputation: 71

Change your style to

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

Upvotes: 1

Andy
Andy

Reputation: 4778

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

Upvotes: 301

codingrose
codingrose

Reputation: 15709

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.

Upvotes: 20

Malachi
Malachi

Reputation: 33720

Change the display property of the svg to be block.

Upvotes: 6

Farshad
Farshad

Reputation: 1485

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>

Upvotes: 2

danrodi
danrodi

Reputation: 296

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>

Upvotes: 0

Related Questions