图片在DIV中产生底部间隔的解决方法

2022-05-25 分类：网站建设

默认情况下，容器中的图片在容器底部会自动产生一个间隔距离。要想把这个距离清除掉，首先要明白这个距离的产生原理，也即是说为什么会产生这个距离。图片作为内联元素，其默认的vertical-align属性的取值为baseline，也就是基线对齐。这种垂直对齐方式是图片的底部与文本的基线对齐。这就是产生这个小距离的根本原因。
产生的小距离是图片与文本基线对齐后，文本基线下方的文字部分，也就是四线三格的第三格，即基线。

四线三格的第三格，即基线

既然知道了这个距离产生的原因，那么就容易处理了。

解决方案1：调整vertical-align属性的取值：
既然这个距离是由图片的vertical-align属性的默认取值为baseline产生的，那么就可以调整该属性的取值不再是baseline即可。
将图片的vertical-align属性设置为bottom、middle、top均可。实现代码如下所示。

div img{vertical-align:middle;}

解决方案2：调整display属性的取值：
我们知道，vertical-align属性只适用于内联元素。那么只需要将图片由内联元素改为块级元素即可。
修改元素的状态可以采用CSS技术中的display属性。实现代码如下所示。
div img{display:block;}

上述代码将<img />标记变为了一个块级元素。

解决方案3：调整line-height属性的取值：
当把line-height属性的取值设置为0时，则文字之间的间距较小。尽管图片的垂直对齐方式依然为基线对齐，但是文字的基线不足以显示出来，所以就看不到这个小距离了。实现代码如下所示。
div{line-height:0;}

注意，这个属性不适用于图片标记的，应该用于图片所在的容器标记对之上，以保证该容器内部的文本行距为0。

解决方案4：调整font-size属性的取值：
如果将font-size属性的取值设置为0，也可以像解决方案3那样将文本的大小调小，则文本的基线就不足以显示出来了。实现代码如下所示。

div{font-size:0;}

同理，该属性的设置也需要在图片所在的容器标记对之上实现。

网站题目：图片在DIV中产生底部间隔的解决方法
标题URL：https://www.cdcxhl.com/news28/159028.html

成都网站建设公司_创新互联，为您提供网站维护、全网营销推广、网站改版、营销型网站建设、网站营销、App开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容