如何清除图片下方出现几像素的空白间隙?

时间:2022-03-02 20:31:12

周末在重构页面的时候发现一个img下方会出现几像素的空白间隙,根据我自己的实践和测试

一个有效的方法是,根据img图片的高度,比如为:x,那么给其父级元素也设置高度为:x。此时间隙消失;

 

还看到飘零雾雨前辈提供的解决办法,mark以供参考(http://css.doyoe.com/):

方法1:

img{display:block;}

方法2:

img{vertical-align:top;}

除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length><percentage>值都可以

方法3:

#test{font-size:0;line-height:0;}

#test为img的父元素