如何摆脱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空间.divsvg

已经尝试过设置padding和margin两个元素0,但没有运气.

Answer 1

你需要display: block;你的svg.

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

这是因为内联块元素(如<svg>和<img>)位于文​​本基线上.你看到的额外空间是容纳角色下降器的空间('y','g'等尾部).

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

Answer 2

svg是一个inline元素.inline元素留下白色空间.

解:

添加display:block到svg或使父div的高度相同svg.

DEMO在这里.

Answer 3

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

Answer 4

display将svg 的属性更改为block.