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

HtmlCssSvg

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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.

Solution 3 - Html

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

Solution 4 - Html

Change the display property of the svg to be block.

Solution 5 - Html

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>

Solution 6 - Html

Change your style to

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

Solution 7 - Html

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>

Solution 8 - Html

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
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Svg Solutions

Previous Solution:

Reverse Range in Swift

Swift

Next Solution:

Correct way to write loops for promise.

Javascriptnode.jsPromiseBluebird

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDanielView Question on Stackoverflow
Solution 1 - HtmlAndyView Answer on Stackoverflow
Solution 2 - HtmlcodingroseView Answer on Stackoverflow
Solution 3 - HtmlAngelo LucasView Answer on Stackoverflow
Solution 4 - HtmlMalachiView Answer on Stackoverflow
Solution 5 - HtmlFarshadView Answer on Stackoverflow
Solution 6 - HtmljcdsvgView Answer on Stackoverflow
Solution 7 - HtmldanrodiView Answer on Stackoverflow
Solution 8 - HtmlJamieView Answer on Stackoverflow