首页 专题 H5案例 前端导航 UI框架

img 标签下多余空白的解决方法

作者:TG 日期: 2016-05-29 阅读: 759
有些时候,我们会发现div排版布局中,我们并没有设置padding和margin,可img标签下方还是会出现多余的空白,这是为什么呢?
其实,在浏览器中,图片默认的vertical-align是baseline,如图:

可以看到图片是与字母x的下边距对齐的,也就是baseline。
那么,我们该如何去掉这多余的空白呢?
方法如下:
1.将图片转换为块级

img{ display:block;}

2.设置图片的垂直对齐方式

img{ vertical-align:top}

3.设置父级的文字大小为0px

font-size:0;

4.设置父级的属性

overflow:hidden;

5.取消图片标签和其父级的最后一个结束标签之间的空格

关注”全栈技术杂货铺“

全栈技术杂货铺