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

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

如下图:

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

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

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

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

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

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

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

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

css 复制代码
/*图片的父元素*/
span {
  font-size: 0;
}

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

如下图:

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


1\] [原文阅读](https://mp.weixin.qq.com/s?__biz=MzU2ODYyNDc4OQ==&mid=2247483978&idx=1&sn=1915ed3ec98c55bf5c38f09e9a1f9054&chksm=fc8a51b0cbfdd8a67f9edda0d210b81fd1d75f3441ad987c98479bbb250d2069479fa653dc18&token=1319586884&lang=zh_CN#rd) 我是 Just,这里是「设计师工作日常」,求点赞求关注!

相关推荐
Boilermaker199244 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构