img标签插入图片下方有空隙，怎么解决？

设计师工作日常2024-01-31 15:16

在写静态页面时，经常会用 img 标签插入图片，但图片插入后，直接在浏览器中运行时，图片的下方经常会有空隙间距，文字或者其它元素不好跟图片对齐，devtools 工具查看的话会很明显。

如下图：

上图红色的部分就是图片下方的间距，这样看的话就很明显了。

之前碰到这种情况，常用的解决办法就是给图片的父元素给一个图片相同的高度，然后加上 overflow：hidden ；

css 复制代码

/*图片的父元素*/
span {
  height: 240px; // 图片的高度
  overflow: hidden; // 溢出隐藏
}

但是这种方案有时候在一些交互、要显示隐藏内容时，overflow：hidden 也会把其它需要显示的元素也隐藏掉，这样的话就不是很完美。

在网上搜索了一下这个问题，大部分给出的解决办法都是用 overflow：hidden 来隐藏图片下方溢出的部分。

我也试了其它几种网上给出的解决办法，还有一些给出了 js 来计算解决，比较麻烦。

但是，这个时候还是得夸一下谷歌引擎，通过谷歌查到了一个很简单的解决方法，试了一下很溜。

这个方法就是给图片的父元素加上 font-size: 0;

css 复制代码

/*图片的父元素*/
span {
  font-size: 0;
}

浏览器中通过 devtools 查看，发现图片下方的间距没有了。

如下图：

以上就是本次分享的小技巧，希望对你有一些帮助。

我是 Just，这里是「设计师工作日常」，求点赞求关注！