i have div element with width: 100px
and aspect-ratio: 1
, but why when i add svg inside it, it's height become 104px
?
this is the code:
<div class="container">
<svg viewBox="0 0 100 100"></svg>
</div>
<style>
.container {
width: 100px;
aspect-ratio: 1;
background: red;
}
svg {
background: blue;
}
</style>
By default, SVG elements are inline elements, meaning they have a default display
value of inline
and they sort of behave like text. As a result, inline SVG elements are subject to the styling effects of line-height
, which in browsers typically defaults to normal
or something slightly larger than 1
. This means that in addition to the 100px of height provided by the SVG element, the line it's in will also add a little height.
There are a couple of approaches to fix this. First, you can set the line-height
of your container to 0
in CSS:
.container {
width: 100px;
aspect-ratio: 1;
background: red;
line-height: 0;
}
Alternatively, you can set the display
value of your SVG elements to some type of block
, or vertical-align
to top
:
svg {
display: block; /* or inline-block, or */
vertical-align: top;
background: blue;
}
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