CSS - 内联 SVG 会干扰行高？答案

【问题标题】：CSS - inline SVG interferes with line-height?CSS - 内联 SVG 会干扰行高？
【发布时间】：2021-12-23 05:21:20
【问题描述】：

我很难理解以下 css 行为。也许我错过了一些重要的事情，因为这对我来说实际上似乎是一个简单的场景。考虑以下示例：

.container {
  background-color: lime;
  font-size: 20px;
  line-height: 20px;
}

<div class="container">
  <svg width="1em" height="1em" viewBox="0 0 24 24" >
      <circle cx="12" cy="12" r="10"/>
  </svg>
  Text
</div>

因为container 设置了line-height: 20px，所以我希望它的高度为20px。如果它只包含文本，至少是这种情况。然而，对于 svg，它突然高 24px，即使 svg 高 20px，正如预期的那样，因为height=1em。 “文本”的高度也为 23 像素，尽管我希望它是 20 像素。

有趣的是，如果我将 container 的 line-height 设置为 30px 之类的值，它的行为与预期一样：container 现在是 30px 高。

你能帮我理解为什么container 不是 20px 高吗？还是line-height 在容器包含除纯文本之外的其他元素时就不容易预测？谢谢！

【问题讨论】：

因为vertical-align 的默认值（这里适用，因为 SVG 是一个内联元素）是baseline。将其设置为bottom。
太好了，谢谢！这正是我所缺少的

标签： html css svg line-height

【解决方案1】：

您的演示中有两件事会影响div.container 的高度。首先，line-height 不是显式的、固定的height：it specifies the minimum height of line boxes within div.container in your case. 因为line-height 是最小值，如果它内部的某些东西导致它增长，它就会增长。

这导致了 SVG：它有一个默认的 vertical-align 和 baseline，它与 div.container 的基线对齐，并且由于它的高度，导致 div.container 的 height 增长来容纳它。通过将 SVG 的 vertical-align 更改为其他内容，使其适合您的 20px line-height，您可以使其适合。

我在您的演示中添加了几个不同的vertical-align 道具，以便您了解对齐如何影响高度。通常，bottom 和 top 分别将 svg 与行的底部和顶部对齐，鉴于 SVG 的 20px 高度，将其保持在 line-height 内。但是，如果你真的，真的需要 div.container 成为 20px 高度，height 或 max-height 可能是更好的选择。

.container {
  background-color: lime;
  font-size: 20px;
  line-height: 20px;
    margin-bottom: 1em;
}

<div class="container">
  <svg width="1em" height="1em" viewBox="0 0 24 24" >
      <circle cx="12" cy="12" r="10"/>
  </svg>
  Default: vertical-align: baseline (24px)
</div>

<div class="container">
  <svg width="1em" height="1em" viewBox="0 0 24 24" style="vertical-align:middle">
      <circle cx="12" cy="12" r="10"/>
  </svg>
  Default: vertical-align: middle (~22px)
</div>

<div class="container">
  <svg width="1em" height="1em" viewBox="0 0 24 24" style="vertical-align:bottom">
      <circle cx="12" cy="12" r="10"/>
  </svg>
  Default: vertical-align: bottom (20px)
</div>

<div class="container">
  <svg width="1em" height="1em" viewBox="0 0 24 24" style="vertical-align:top">
      <circle cx="12" cy="12" r="10"/>
  </svg>
  Default: vertical-align: top (20px)
</div>

【讨论】：

感谢您的详细解释。我想我现在明白了：D

【解决方案2】：

这使用flex、align-items: center; 和line-height: 1rem; 将所有高度变为20px：

.container {
  background-color: lime;
    font-size: 20px;
    line-height: 1rem;
    display: flex;
    align-items: center;
}

<div class="container">
  <svg width="1em" height="1em" viewBox="0 0 24 24" >
      <circle cx="12" cy="12" r="10"/>
  </svg>
  Text
</div>

【讨论】：

感谢您的贡献。但是在这种情况下，我不是在寻找特定的解决方案，而是寻求帮助来理解为什么这种情况会如此。