如何去掉 div 元素中 svg 以下的额外空间

下面是这个问题的一个例子(在 Firefox 和 Chrome 中测试过) :

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

View on JSFiddle

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

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

55371 次浏览
小开

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

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

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

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
小开
最佳答案

你的 svg需要 display: block;。

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

这是因为行内块元素(如 <svg>和 <img>)位于文本基线上。你所看到的额外空间是为了容纳字符下降而留下的空间(“ y”、“ g”等字符的尾部)。

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

小开

将 svg 的 display属性更改为 block。

小开

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

解决方案:

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

这里是演示。

小开

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

小开

改变你的风格

Style = “ back-color: red; line-height: 0;”

小开

如果您正在设置 SVG 的高度，并希望 <a>标记包围您的 SVG:

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

提交答案