下面是问题的一个例子(在Firefox和Chrome中测试):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>请注意，蓝色svg下方的div中有额外的red个空格.
已经try 将这两个元素的padding和margin设置为0，但没有成功.
下面是问题的一个例子(在Firefox和Chrome中测试):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>请注意，蓝色svg下方的div中有额外的red个空格.
已经try 将这两个元素的padding和margin设置为0，但没有成功.
你的svg分需要display: block;分.
<svg style="display: block;"></svg>
这是因为内联挡路元素(如第<svg>和第<img>个)位于文本基线上.您看到的额外空间是用于容纳字符下行的剩余空间(‘y’、‘g’等的尾部).
如果需要保留inline或inline-block，也可以使用vertical-align:top