img和canvas下方会有空白的原因

1. 首先我们要知道这部分空白产生的原因。图片默认的vertical-align是baseline，

   也就是字母x的下边距，我们在图片后面写上x就是这样

   
2.  

   如果给x加上背景色就是这样

   
3.  

   可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

   
4.  

   所以我们只需要将img图片display:block，即可去掉div和img之间的空白

   
5.  

   或者将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;}

   
6.  

   也可以将font-size设为0，实际上也是改变了line-height

   
7.  

   当然，我们可以改变vertical-align，让它不是baseline，比如设置vertical-align:middle

   

8.  

 

总结一下原因就是img元素默认的vertical-align是baseline，也就是图片底部和旁边的文字底部对齐，canvas也是图片，可以看到右键也有图片另存为，只不过canvas可以通过js绘图，所以canvas也有这个问题，解决方法可以设置为块状元素，或者vertical-align:middle/bottom，或者设置字体大小或者行高来去除这个空白间

 

http://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html

转载于:https://www.cnblogs.com/qdog/p/7084287.html