Menu
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.
284
This is done using the attribute "preserveAspectRatio" and setting it to "none". Hopefully this helps some of your understanding of SVGs, as they're a really useful tool! Show activity on this post. If you want the SVG to stretch to the entire box, put preserveAspectRatio="none" on the root <svg> element.
If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
The explanation is that 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 need display: block; on your 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 Amazing.
Cause of this issue: It happens because image is an inline element, In order to keep other elements inline, browser add a white space between div and image. Yuou can run code using codepen editor or click on right corner of the window.
Seems to be related to a similar problem with images, e.g. stackoverflow.com/questions/7774814/…. Does this answer your question? Image inside div has extra space below the image You need display: block; on your svg. This is because inline-block elements (like <svg> and <img>) sit on the text baseline.
Change the display property of the svg to be block. Try adding height:100px to div and using a height="100%" on svg: Thanks for your comment. This works fine, but becomes tricky when one does not know the height of the svg in advance. If you're setting the height on your SVG, and you want the <a> tag to wrap around your SVG:
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
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
