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

最新推荐文章于 2022-11-12 15:53:39 发布

才不是小弱鸡

最新推荐文章于 2022-11-12 15:53:39 发布

阅读量615

点赞数

分类专栏： web css

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

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

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>

或者可以将img转换为块级元素，这样也可以实现消除空白缝隙

才不是小弱鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片底部的空白缝隙的消除办法

0x00 问题实例有时候在div中设置图片时会发现图片底部存在一个空白缝隙，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> <img src="tes...
复制链接

扫一扫