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

Here is an illustration of the problem (tested in Firefox and Chrome):

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

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

http://jsfiddle.net/EXLSF/

Notice the extra red space inside the div below the blue svg.

注意蓝色svg下方div内的额外红色空间。

Already tried setting padding and margin of both elements to 0, but with no luck.

已经尝试将两个元素的填充和边距设置为0，但没有运气。

6 个解决方案

#1

You need display: block; on your svg.

你需要显示：block;在你的svg。

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

This is because inline-block elements (like <svg> and <img>) sit on the text baseline. The extra space you are seeing is the space left to accommodate character descenders (the tail on 'y', 'g' etc).

这是因为内联块元素（如如何摆脱div元素中svg下面的额外空间）位于文本基线上。你看到的额外空间是容纳角色下降器的空间（'y'，'g'等尾部）。

You can also use vertical-align:top if you need to keep it inline or inline-block

如果需要将其保持为内联或内联块，也可以使用vertical-align：top

#2

svg is an inline element. inline elements leave white-space.

svg是一个内联元素。内联元素留下白色空间。

Solution:

解：

Add display:block to svg, or make height of parent div same as svg.

添加display：block to svg，或使parent div的高度与svg相同。

DEMO here.

DEMO在这里。

#3

Change the display property of the svg to be block.

将svg的display属性更改为block。

#4

simply add height to main div element

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

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

#5

Try adding height:100px to div and using a height="100%" on svg:

尝试添加高度：100px到div并在svg上使用height =“100％”：

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

#6

Another alternative is add font-size: 0 to svg parent.

另一种方法是将s-row父级添加到font-size：0。

#1