1

我正在努力理解以下 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's line-height 设置为 30px 之类的东西，它的行为与预期的一样：container现在30px很高。

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

4

2 回答 2

3

您的演示中有两件事会影响div.container. 首先，line-height它不是一个明确的、固定的height：它在您的情况下指定行框的最小高度。div.container由于line-height是最小值，如果它内部的某些东西导致它生长，它就会生长。

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

我在vertical-align您的演示中添加了一些不同的道具，因此您可以看到对齐如何影响高度。通常，bottom将topsvg 分别与行的底部和顶部对齐，考虑到 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>

于 2021-11-10T16:01:21.237 回答
1

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

.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>

于 2021-11-10T15:52:13.587 回答