图片下方三像素原因及解决办法

img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白，也就是常说的图片下方三像素的bug。

场景：一个div里面套一个图片，加一个遮罩层的效果就会显示这个问题。
原因：因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行符/空格间隙问题”。
解决办法
1.img标签的父标签增加font-size:0;

body{
　　　　font-size: 0;
　　}

2.img标签增加display:block;

img{
display:block;
}

3.img标签增加vertical-align: middle;

img{
vertical-align: middle;//或者vertical-align:top;
}

4.img标签增加float:left

img{
float:left;
}