如何摆脱div元素中svg下面的额外空间

Question

以下是问题的说明（在Firefox和Chrome中测试）：

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

http://jsfiddle.net/EXLSF/

请注意蓝色red下方div内的额外svg空格。

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

Answer 1

display: block;上需要svg。

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

这是因为内联块元素（如<svg>和<img>）位于文本基线上。你看到的额外空间是留下来容纳角色下降器的空间（尾部在＆＃39; y＆＃39;，＆＃39; g＆＃39;等）。

如果您需要保留vertical-align:top或inline

，也可以使用inline-block

Answer 2

svg是inline元素。 inline个元素会留下空格。

解决方案：

将display:block添加到svg，或将父div的高度设为svg。

DEMO here.

Answer 3

将svg的display属性更改为block。

Answer 4

另一种选择是将font-size: 0添加到svg父级。

Answer 5

尝试将height:100px添加到div并在height="100%"上使用svg：

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

Answer 6

只需将高度添加到主div元素

即可

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

Answer 7

将样式更改为

style =“ background-color：red; line-height：0;”