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

87

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

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

展开摘要

在JSFiddle上查看

请注意蓝色下方的额外red空间。divsvg

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

html css svg

— 丹尼尔
source

似乎与图像的类似问题有关，例如stackoverflow.com/questions/7774814/…。

— 丹尼尔（Daniel）

174

您需要display: block;自己的svg。

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

这是因为内联块元素（如<svg>和<img>）位于文本基线上。您看到的多余空间是留给字符降序使用的空间（“ y”，“ g”等的尾部）。

您也可以使用vertical-align:top，如果你需要保持inline或inline-block

— 安迪
source

惊人。那么，所有内联元素是否在底部添加空白？

— clapas 2015年

2

原因是inline-block元素（如<svg>和<img>）位于文本基线上。您看到的多余空间是留给字符降序使用的空间（“ y”，“ g”等的尾部）。

— Paul LeBeau

1

我希望vertical-align:top

— 约翰·肖

我坚信多余的空间与之有关line-height，但是line-height: 0在svg和/或其容器上进行设置没有任何区别。只display: block解决了。如果您碰巧要在大型SVG上工作，这是一个陷阱，因为您永远不会认为它是内联的。但是，如果您有一个小图标，这是有道理的。

— devuxer '19

display: block我没有工作，但vertical-align没有

— 周杰伦

12

svg是一个inline元素。inline元素离开空白。

解：

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

演示在这里。

— 手性
source

4

另一种替代方法是添加font-size: 0到svg parent。

— 恩格洛·卢卡斯（Angelo Lucas）
source

3

display将svg的属性更改为block。

— 玛拉基
source

1

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

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

— 丹罗迪
source

4

谢谢你的评论。这可以很好地工作，但是svg在事先不知道高度时会变得棘手。

— 丹尼尔（Daniel）

1

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

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

— 法尔沙德
source

0

将样式更改为

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

— jcdsvg
source