详解CSS清除图片下几像素空白间隙的方法

网页制作 2024/12/23 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

最近有伙伴问小编的问题：

页面排版的时候发现图片下面有那么1-2像素的间隙空白，怎么去除。

这个是浏览器的一个设计问题。img本来是行内元素，却可以用width 和height,当父元素没有设置高度的时候，用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。

去除图片下间隙的方法一

img{display:block;}

方法2

img{vertical-align:top;}

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

方法3

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

#qdxw为img的父元素

总结

标签：

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“详解CSS清除图片下几像素空白间隙的方法”

暂无详解CSS清除图片下几像素空白间隙的方法的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

2024年12月23日