html中为什么img下方会出现空隙？以及不同的解决方法

在做项目的时候遇到了这个问题。。html中img图片下方出现空隙，但又找不到空隙是从哪里出现的，那么这个空隙到底是哪里来的呢？
这是一个很常见的问题，出现这个问题的原因其实很基本。。就是，img是一个行内元素，而设立html标准的是欧洲而不是亚洲，所以为了正确显示带有尾巴（比如j、q、y等）英文字母，就在下方留了一些空白的地方。 所以要解决这个方法其实就是解决文字样式与图片样式的问题。

那么现在提供一些解决这个空白bug的方法：

1.将图片转换为块级元素，即在img上添加css样式display:block;

2.改变图片的垂直对齐方式，即在img上添加css样式vertical-align:top或者vertical-align:bottom;

如果这个img是包含在父元素内的话，比如一个div中包含着一个img，还可以设置父元素的css样式来解决这个空白bug。
3.设置父元素div的行内高度css样式line-height:0;

4.如果父元素中没有文字的话，可以在父元素div中添加字体大小的css样式font-size:0;

上述方法都能解决空白间隙的问题，效果如下，perfect~

如果是图片与文字混排的话就有一些其他不同的解决方案或者利用不同的布局，比如float浮动什么的~有兴趣可以一起交流分享下:)