Question

这个简单的html：

＆＃13;

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

＆＃13;

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

为什么。如何使周围的div尊重SVG的大小，而不在周围的div上显式height并将布局svg+text保持在一行中？

Answer 1

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

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