在写静态页面时,经常会用 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,这里是「设计师工作日常」,求点赞求关注!