Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why there is additional 4px height for div when there is svg inside it? [duplicate]

Tags:

html

css

svg

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>
like image 766
prs_wjy Avatar asked Sep 02 '25 16:09

prs_wjy


1 Answers

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;
}
like image 95
Dennis Kats Avatar answered Sep 05 '25 05:09

Dennis Kats