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,这里是「设计师工作日常」,求点赞求关注!

相关推荐
虫无涯2 分钟前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰2 分钟前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f3 分钟前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖4 分钟前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰7 分钟前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °12 分钟前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)14 分钟前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic30 分钟前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack
qq_5103515932 分钟前
vw 和 clamp()
前端·css·html
良木林35 分钟前
JS中正则表达式的运用
前端·javascript·正则表达式