本文摘自PHP中文网,作者巴扎黑,侵删。
这篇文章主要给大家介绍了解决img标签上下出现间隙的方法,因为最近在工作中遇到了这个问题,所以想着记录下来。方便自己或者有需要的朋友们参考借鉴,下面来一起看看吧。我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,我们一般会去使用一个列表来对我们的img 进行承装。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
但是这个时候我们发现了一个问题,为什么我的图片下面多出来一条线呀?
这是怎么回事呀?
我不是已经把 img 的外边距和内边距什么的全部清空了么?
实际上,这其实是inline元素搞的鬼。
任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。----《CSS权威指南》
什么意思?
意思就是,其实如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙,也就是我们上文出现的问题了。
那我们既然知道了这个问题出现的原因,那么解决起来也就简单多啦。
1.第一种解决方案
既然是 inline 元素才会发生这个问题,那我们自然可以简单粗暴的解决这个问题,那就是给我们的元素“变个性”,让它从 inline 变为 block 不就可以了么?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
2.第二种解决方案
这也太粗暴了,变了性别,回头还怎么愉快的玩耍呀,所以我们要尝试曲线救活,我们可以去修改一下它的垂直对齐方式呀,这样是不是就可以了呢?
相关阅读 >>
更多相关阅读请进入《img》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者