图片底部的空白缝隙的消除办法

最新推荐文章于 2024-02-15 19:51:31 发布

才不是小弱鸡

最新推荐文章于 2024-02-15 19:51:31 发布

阅读量680

点赞数

CC 4.0 BY-SA版权

分类专栏： web css

本文链接：https://blog.csdn.net/qq_40996739/article/details/108753494

web 同时被 2 个专栏收录

42 篇文章

订阅专栏

css

19 篇文章

订阅专栏

本文介绍了解决在div中设置图片时出现底部空白缝隙的方法。通过调整img元素的vertical-align属性或将其转换为块级元素，可以有效解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0x00 问题实例

有时候在div中设置图片时会发现图片底部存在一个空白缝隙，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <img src="test.jpg" />
        测试文字
    </div>
</body>
<style>
    .box {
        border: 5px solid black;
    }
</style>
</html>

0x01 解决办法

这个问题是因为图片对齐的是基线baseline，所以将img的vertical-align设为按照其他对齐就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <img src="test.jpg" />
        测试文字
    </div>
</body>
<style>
    .box {
        border: 5px solid black;
    }
    .box > img {
        vertical-align: middle;
    }
</style>
</html>