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

问题描述

 < div style =background- color：red;>< / svg>< / div>< svg height =100pxwidth =100style =background-color：blue;> 
  

http：// jsfiddle.net/EXLSF/

请注意红色空间> div 低于蓝色 svg 。

已尝试设置两个元素的和 margin 到 0 ，但没有运气。你需要 display：block; 在你的> 上>

解决方案 svg 。

 < svg style =display：block;>< / svg> ; 
  

这是因为内联块元素（如< svg> code>和< img> ）位于文本基线上。你看到的额外空间是留下容纳字符下降的空间（'y'，'g'等尾巴）。



你也可以使用 vertical-align：top 如果您需要保留 inline 或 inline-block

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>

http://jsfiddle.net/EXLSF/

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.

解决方案

You need display: block; on your svg.

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

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

You can also use vertical-align:top if you need to keep it inline or inline-block

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