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

Posted 2023-03-05

【中文标题】如何摆脱div元素中svg下方的额外空间

【英文标题】：How to get rid of extra space below svg in div element

【发布时间】：2014-08-28 21:33:59

【问题描述】：

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

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

View on JSFiddle

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

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

【问题讨论】：

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

这能回答你的问题吗？ Image inside div has extra space below the image

【参考方案1】：

您的svg 上需要display: block;。

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

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

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

【讨论】：

太棒了。那么是不是所有的内联元素都在底部加了空格呢？

解释是inline-block 元素（如<svg> 和<img>）位于文本基线上。您看到的额外空间是用于容纳字符下降的空间（'y'、'g' 等的尾部）。

我更喜欢vertical-align:top

我确信额外的空间与 line-height 有关，但在 svg 和/或其容器上设置 line-height: 0 没有任何区别。只有display: block 解决了它。如果您碰巧在处理大型 SVG，这将是一个难题，因为您永远不会认为它是内联的。不过，如果你有一个小图标，那就有意义了。

display: block 对我不起作用，但 vertical-align 对我有用

【参考方案2】：

svg 是一个 inline 元素。 inline 元素留下空白。

解决方案：

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

DEMO here.

【参考方案3】：

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

【参考方案4】：

将 svg 的 display 属性更改为 block。

【参考方案5】：

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

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

【参考方案6】：

改变你的风格

style="background-color: red; line-height: 0;"

【参考方案7】：

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

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

【讨论】：

感谢您的评论。这很好用，但如果事先不知道svg 的高度，就会变得棘手。

【参考方案8】：

如果您要设置 SVG 的高度，并且希望 <a> 标记环绕您的 SVG：

将height: fit-content; 添加到<a> 在 SVG 中添加 display: block;