爲什麼在SVG包含div採取更多的空間

Question

這一件簡單的html：

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

您可以看到SVG是40px但周圍的div是44px高（測試鉻）。

爲什麼。以及如何使周圍的div尊重SVG的大小，而沒有明確的height對周圍的div和保持佈局svg+text在一個單一的線？

Answer 1

這裏的svg元素有display: inline，因此被視爲文本。因此，它還觀察控制每條線獲得多少額外垂直空間的屬性line-height。出於可讀性的原因，我們不會直接將線條粘合在一起。

切換到display: block在svg使得div完全適合，因爲它在div設置line-height: 0。