140

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.

showdev
  • 28,454
  • 37
  • 55
  • 73
Daniel
  • 3,383
  • 4
  • 30
  • 61
  • Seems to be related to a similar problem with images, e.g. http://stackoverflow.com/questions/7774814/remove-white-space-below-image. – Daniel Jul 08 '14 at 08:31
  • Does this answer your question? [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – Sebastian Simon Jun 19 '21 at 13:59

9 Answers9

278

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

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Andy
  • 4,538
  • 2
  • 26
  • 34
  • Amazing. So do all inline elements add white space at the bottom? – clapas Jul 27 '15 at 14:37
  • 4
    The explanation is that `inline-block` elements (like `` and ``) 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). – Paul LeBeau Apr 12 '17 at 09:56
  • 1
    I would prefer to `vertical-align:top` – John Xiao Apr 28 '18 at 07:39
  • 1
    I was convinced the extra space was something to do with `line-height`, but setting `line-height: 0` on the svg and/or its container made no difference. Only `display: block` solved it. This is such a gotcha if you happen to be working on a large SVG because you'd never think of it as inline. If you have a little icon, though, it makes sense. – devuxer Jul 23 '19 at 06:56
  • `display: block` did not work for me, but `vertical-align` did – Jay Apr 10 '20 at 04:25
17

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.

codingrose
  • 15,563
  • 11
  • 39
  • 58
10

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

Angelo Lucas
  • 517
  • 6
  • 13
5

Change the display property of the svg to be block.

Malachi
  • 33,142
  • 18
  • 63
  • 96
1

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>
Farshad
  • 1,465
  • 1
  • 9
  • 12
1

Change your style to

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

jcdsvg
  • 71
  • 1
1

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>
JShobbyist
  • 532
  • 3
  • 9
  • 23
0

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>
danrodi
  • 296
  • 1
  • 4
  • 24
  • 4
    Thanks for your comment. This works fine, but becomes tricky when one does not know the height of the `svg` in advance. – Daniel Jul 08 '14 at 08:28
0

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
Jamie
  • 3,105
  • 1
  • 25
  • 35