CSS解决图片底部空白缝隙的问题

最新推荐文章于 2024-05-31 15:09:06 发布

I am the sun?

最新推荐文章于 2024-05-31 15:09:06 发布

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/fighting_dream/article/details/113495334

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

当你将一张图片放在一个盒子里面的时候，如下图，是不是有一点点缝隙：
在这里插入图片描述
为什么会有这个缝隙呢？
因为图片是行内快元素，默认是和文字的基线对齐的。我来演示一下。

是不是刚好给 y 出来的部分呀。那如何去掉空白缝隙呢？
只要给图片添加vertical-align:bottom或者middle或者top就行啊
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 2px solid black;
        }
        img {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
    </div>
</body>
</html>

运行结果如下：
在这里插入图片描述
改成top或者middle也行的哦~
其实还可以将图片转为块级元素，因为块级元素就图片自己独占一行，也就没有基线之说了。如下：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 2px solid black;
        }
        img {
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
    </div>
</body>
</html>

运行结果：
在这里插入图片描述
但是有个缺点，就是图片转为块级元素后，图片就独占一行，这在网页布局中不常用哟~
因此，最好的方法，就是将图片样式添加vertical-align:bottom或者top或者middle之类的哦！

I am the sun?

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS解决图片底部空白缝隙的问题

当你将一张图片放在一个盒子里面的时候，如下图，是不是有一点点缝隙：为什么会有这个缝隙呢？因为图片是行内快元素，默认是和文字的基线对齐的。我来演示一下。是不是刚好给 y 出来的部分呀。那如何去掉空白缝隙呢？只要给图片添加vertical-align:bottom或者middle或者top就行啊代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫