图片去除下间隙（图片3像素）的方法

Posted 2021-01-16 ldq678

　　一、提出问题

　　在浏览器中，图片有一个下间隙问题，有人也称之为图片3像素BUG。如下图：

       ，这是放大过的效果。我们可以清晰的看到，图片明显没有跟文字的最底部对齐，比如字母g，就比图片的底部更下探出一截。

　　这里需要澄清一下：

　　1.这并不是什么浏览器bug，而只是英文字母书写时有个基线的问题，基线决定了图片的对其方式。这才是造成浏览器中图片下间隙的本质。

　　那么，什么是基线？

　　我们小时候学英文，一开始都是用的四线本写英文字母，就是那个长的跟五线谱一样的本，只不是4条线。其中第3条线就是基线，此线是绝大多数比较矮的字母的脚部对齐的线。比如a、z、x，这些短小一点的字母，它们的是以第3条线作为字母底部的对齐线的。但有的字母比较“高大”，比如g，y，它们的尾巴就会伸到第4条线上。

　　同理，在网页上显示字符，也有一个基线存在，并且这个基线也是以英文4线普的对齐理论来对齐的。所以，我们就会看到下图的情况

　　

　　很明显，我添加上去的这条红线，就是网页上这一行文字的基线位置。

　　2.这个下间隙也并不是固定的3像素，而是变化的。　

　　知道了基线的概念，我们就知道了，像“g”这样比较高的字母，它探出基线之下的内容占多少像素，其实是跟当前元素设置的字号大小有关的。

　　而图片在网页中默认的展示样式是inline-block的，所以它的对齐方式就跟文本一样，要跟基线对齐，这样就产生了图片与容器的下间隙。

　　由于浏览器默认文字的字号是14px（有的是默认16px），所以就造成了默认的3像素的下间隙。但其实我们已经知道了，如果当前容器设置的字号远远大于16px，那么这个下间隙将大于3像素。

　　二、解决办法

　　去除图片下间隙的办法有很多，常用的有3种

　　（1）设置父盒子字号为0　　比如：

.box{
   font-size: 0;  
}

　　（2）改变图片的display　　

.box img{
   display: block;  
}

　　（3）给图片设置垂直对齐方式

.box img{
   virtical-align: middle;//设置为任意值都可以  
}