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] 原文阅读

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

相关推荐
neter.asia9 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫9 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年28 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_29 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891131 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾33 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu35 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym40 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫41 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫1 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js