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

【问题标题】：How to get rid of extra space below svg in div element如何摆脱div元素中svg下方的额外空间
【发布时间】：2014-08-28 21:33:59
【问题描述】：

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

&lt;div style="background-color: red;"&gt;&lt;svg height="100px" width="100" style="background-color: blue;"&gt;&lt;/svg&gt;&lt;/div&gt;

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

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

【问题讨论】：

标签： html css svg

【解决方案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相同。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

将 svg 的 display 属性更改为 block。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：