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

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

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

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对成都展览展示等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业网站推广优化,H5建站,响应式网站。

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

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

divimg{vertical-align:middle;}

解决方案2：调整display属性的取值：
我们知道，vertical-align属性只适用于内联元素。那么只需要将图片由内联元素改为块级元素即可。
修改元素的状态可以采用CSS技术中的display属性。实现代码如下所示。
divimg{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中产生底部间隔的解决方法
文章源于：https://www.cdcxhl.com/article8/echdip.html

成都网站建设公司_创新互联，为您提供网站改版、ChatGPT、网站收录、做网站、营销型网站建设、小程序开发

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

猜你还喜欢下面的内容