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

小编典典

css

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

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

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

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

阅读 619

2020-05-16

共1个答案

小编典典

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

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

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

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

2020-05-16