前端培训之如何清除图片下方出现几像素的空白间隙

参加过前端培训或者是自学前端技术的同学一定都遇到过这样的事情,就是在我们前端页面添加图片的时候会在图片下方出现几像素的空白间隙,那是怎么造成的呢,可能刚参加前端培训的学员不知道原因,尤其是初学的自学者更加比较迷茫,其实这是由于img默认是按照基线(baseline)对齐导致的。

方法1:

img{display:block;}

方法2:

img{vertical-align:top;}

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

方法3:

给 img的父级 添加:font-size: 0; line-height: 0;

这三种方法都是可以很好的解决图片下方出现几像素的空白间隙,大家用哪一种方法都是可以的,一般在前端培训的过程中前端培训老师也都会提及这些方法,自学的同学也可在网上搜索找到相关的解决办法。


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)