如何摆脱div元素中svg下方的额外空间 [英] How to get rid of extra space below svg in div element

问题描述

以下是问题的说明(在 Firefox 和 Chrome 中测试):

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

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

在 JSFiddle 上查看

注意蓝色 svg 下方的 div 中额外的 red 空间.

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

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

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

推荐答案

你需要 display: block; 在你的 svg 上.

You need display: block; on your svg.

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

这是因为行内块元素(如 和 )位于文本基线上.您看到的额外空间是用于容纳字符降序的空间('y'、'g' 等的尾部).

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).

如果需要保持 inline 或 inline-block

这篇关于如何摆脱div元素中svg下方的额外空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！