EcxvEbgPA

23朵毒蘑菇

HTML中img标签会出现下边距,底部距离下一个元素会有一小段距离

原文章迁移

CSS|HTML|

2020-12-23 10:20:11 已有版本 1 个 show:0.54kTYPE: blog

有时做网页的时候会遇到一个小坑:img图片会有一个下边距。

//CSS这样设置都不管用
padding:0;
margin:0;

参考了一些文章,是这么解释的

图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

解决方法如下:

//给img添加如下css
vertical-align: middle; //在IE6中大概还有一像素的顶边距,最好为topbottom

或者

//给img的父容器添加如下css(比较极端)
font-size:0; //设置字体大小为0

很多问题谷歌或者百度都能解决,但是文章太多太杂,坑不少,做一个记录,希望能能帮到大家。