图片下边距问题解决方案

图片下边距问题

1、问题的实质，在html，图片本质上就是文字，而文字对齐方式是有好几种的。
以下图片来表示：
图片中一共有四条线，而在html中默认对齐方式是（vertical-baseline），问题就出在这个地方，在baseline和bottom之间是有一段空隙的，当图片对齐方式也是baseline的时候，自然就会存在一段baseline和bottom形成的间隙。并且该间隙会随文字大小改变。
如图：
解决方法有三种：
1、改变对齐方式，这里将对齐方式改成（vertical-middle），一来可以解决下边距，二来可以设置图片对齐方式，方便后续图片使用。结果：

2、将图片转化为块级元素（display:block），不过图片变为块级元素会独占一行。
3、将字体大小设置为0（ font-size：0）,这种方法确实可以实现清除图片下边距，不过该块内文字也无法显示，通过设置权重!important可以改变，不过挺麻烦的。
总结：方法一是目前的较优方案。