图片在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;}

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


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

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


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

div{font-size:0;}

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

标题名称:图片在DIV中产生底部间隔的解决方法
网页链接:https://www.cdcxhl.com/news/159028.html

成都网站建设公司_创新互联,为您提供网页设计公司网站建设品牌网站建设动态网站标签优化App设计

广告

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

绵阳服务器托管