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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

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

回答：

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

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

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

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

以上是 如何摆脱div元素中svg下方的多余空间 的全部内容， 来源链接： utcz.com/qa/420784.html

回到顶部