周末在重构页面的时候发现一个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的父元素