CSS 网格中 div 内的 SVG 在底部添加了一些额外的填充，为什么？

Question

我正在尝试使用 CSS 网格显示 SVG 网格。像这个例子一样简单，只是 div，还没有 SVG。这很好用。

#wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 650px;
  
  .child {
    background-color: green;
    aspect-ratio: 2/3;
  }
}

<div id="wrapper">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

现在，如果我在其中一个 div 中添加 SVG，它会弄乱对齐：

#wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 650px;
  
  .child {
    background-color: green;
    aspect-ratio: 2/3;
  }
}

<div id="wrapper">
  <div class="child"></div>
  <div class="child"><svg viewBox="0 0 400 600" style="background-color: black"><circle r="45" cx="50" cy="50" fill="red" /></svg></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

不知何故，它在包含 SVG 的“子”div 的底部添加了一些额外的填充，但我无法弄清楚为什么会发生这种情况或如何防止它。有什么想法吗？

Answer 1

SVG 被视为

inline

元素，因此它们的高度由 line-height 定义（可能会继承）。

这里的答案更详细：内联元素和行高

因此修复的选项是将您的

svg

元素设置为

display: block;

。或者根据 SVG 的大小调整这些元素的

line-height

（或调整为

line-height: 0

，但这对我来说总是感觉有点老套）。