Reputation: 3711
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>
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
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
Reputation: 637
Another alternative is to add font-size: 0
to the SVG parent.
Upvotes: 13
Reputation: 4345
If you're setting the height on your SVG, and you want the <a>
tag to wrap around your SVG:
height: fit-content;
to the <a>
display: block;
to the SVGUpvotes: 2
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
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
.
Upvotes: 20
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
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