为什么div里面有svg时还要额外增加4px高度？

Question

我有 div 元素width: 100px，aspect-ratio: 1但为什么当我在其中添加 svg 时，它的高度变成了104px？

这是代码：

<div class="container">
  <svg viewBox="0 0 100 100"></svg>
</div>

<style>
  .container {
    width: 100px;
    aspect-ratio: 1;
    background: red;
  }

  svg {
    background: blue;
  }
</style>

Answer 1

默认情况下，SVG 元素是内联元素，这意味着它们的默认display值为inline，并且它们的行为类似于文本。因此，内联 SVG 元素会受到 的样式效果的影响line-height，在浏览器中通常默认为normal或稍大于 的样式1。这意味着除了 SVG 元素提供的 100px 高度之外，它所在的行也会增加一点高度。

有几种方法可以解决这个问题。首先，您可以在 CSS 中将line-height容器设置为：0

.container {
  width: 100px;
  aspect-ratio: 1;
  background: red;
  line-height: 0;
}

或者，您可以将displaySVG 元素的值设置为某种类型block,vertical-align或top：

svg {
  display: block; /* or inline-block, or */
  vertical-align: top;
  background: blue;
}