CSS图片底部3像素问题解决

由于之前面试经常被问到这个问题，加上项目中确实常遇到，虽然简单，还是记录下来。

图片中两张img图片，底部多余的为图片3像素。是由图片元素默认为inline-block引起的。

解决3像素，方法有很多种

1，给img图片标签添加属性vertical-align:top;（不是baseline即可）：

img{

vertical-align:top;

}

2，img的父标签添加属性：font-size：0；

XXX{

font-size:0;

}

3，给图片添加属性：display:block;

img{

display:block;

}