html - 如何摆脱div元素中svg下方的多余空间

Question

这是问题的说明(在 Firefox 和 Chrome 中测试):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

View on JSFiddle

请注意 div 中蓝色 svg 下方的额外 red 空间。

已经尝试将两个元素的 padding 和 margin 设置为 0，但没有成功。

Answer 1

你需要display: block;在你的 svg .

<svg style="display: block;"></svg>

这是因为行内 block 元素(如 <svg> 和 <img> )位于文本基线上。您看到的额外空间是用于容纳字符下部的空间('y'、'g' 等的尾部)。

您还可以使用 vertical-align:top如果你需要保留它 inline或 inline-block