CSS

Question

我很难理解以下 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，我希望它有 20 像素高。如果它只包含文本，至少是这种情况。然而，对于 svg，它突然变成了 24px 高，即使 svg 是 20px 高，正如预期的那样，因为 height=1em。此外，“文本”的高度为 23px，尽管我希望它是 20px。

有趣的是，如果我将 container 的行高设置为 30px 之类的值，它会按预期运行：container 现在 30px 高。

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

Answer 1

这使用 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>

Answer 2

您的演示中有两件事会影响 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 的基线对齐，并且由于它的高度，导致 height 的 div.container 来增长以适应它。通过将 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>

CSS - 内联 SVG 会影响行高吗？

CSS - inline SVG interferes with line-height?

html

svg

line-height