为什么包含 svg 的 div 占用更多空间 [重复]

Question

这段简单的html：

<div style="background:blue">
  <svg width="40" height="40" style="background:red"></svg> some text
</div>

您可以看到 svg 为 40px 但周围的 div 为 44px 高（在 chrome 上测试）。

为什么。以及如何使周围的 div 尊重 SVG 的大小，而无需在周围的 div 上明确地 height 并将布局 svg+text 保持在一行中？

Answer 1

这里的svg 元素有display: inline，因此被视为文本。因此，它还观察line-height 属性，该属性控制每行获得多少额外的垂直空间。出于可读性的原因，我们不会将行直接拼凑在一起。

在svg 上切换到display: block 会使div 完全匹配，就像在div 上设置line-height: 0 一样。