去除图片底部空隙的方法总结
Apr 6, 2016
问题产生的原因:
该空隙既不是图片的默认margin,也不是border,而是因为<img>
标签与生俱来的特性,因为其属于行内元素,而行内元素默认的对齐方式是基线对齐,关于基线对齐以后另写文章解释,这里先借用网上一张图来说明:
以下消除办法:1
2
3
4<div>
<img src="./test.jpg" />
<p>插秧哥的博客</p>
</div>
1.设为block
既然是行内元素的默认行为,那么使其设置为块级元素自然就好:1
2
3img{
display:block;
}
2.设置vertical-align
既然垂直方向对齐方式是默认的是baseline
基线对齐,那么就设置其为非基线对齐,在vertical-align的这么多属性值当中亲测好使的有top
,text-top
,middle
,bottom
:1
2
3img{
vertical-align: top; //text-top middle bottom
}
3.设置float
如果条件允许,你也可以设为浮动元素,使其脱离文档流,也能消除底部空隙。
4. 设置负margin
设置图片margin-bottom
为负值也可以解决该问题,设为负margin后,底部元素自然就能顶上来,注意:具体margin-bottom
值并不是传说中的-3px
,我的情况是-5px
:1
2
3img{
margin-bottom: -5px;
}
5.固定父元素高度
此法较为笨拙,但也能解决问题,那就是把父元素的高度和图片的高度保持一致(写死)。
上述四种方法亲测都能解决问题,欢迎补充,指正。正确的效果为:
总结:此问题牵扯到 行内元素,基线,vertical-align,line-height相关知识,问题只是现象,背后的原理才是问题的根本来源,后续补充上述内容。