为什么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的大小而不height在周围的div上显式并将布局保持在svg+text一行中？

Answer 1

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

切换到display: block上svg使得div拟合准确，作为不设置line-height: 0上div。