图片底部出现空白间隙原因及解决方案

最新推荐文章于 2024-07-09 15:59:19 发布

太想进步了

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量1.4k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44755188/article/details/105607258

版权

	我们在给盒子里放图片时，图片总是离盒子底部还有一段白色间隙，这让强迫症表示很不舒服
	以下我们来说说产生原因以及解决方案吧

在这里插入图片描述

因为行内块元素（这里的图片）默认是与文字基线对齐的，看到那个字母p与其他字母区别了吧 ，
p下面的线是底线，而与大多数字母对齐的是基线，所以图片产生一条空白缝隙

解决方案：

设置图片与文字的对齐方式为其他方式（top/middle/bottom）
因为行内块与行内元素才会与文字对齐方式默认是基线对齐，将图片改为块元素即可

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            border: 2px solid red;
        }
        
        .box img {
            /* vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom; */
                    /* 方案一 */
            display: block;
                    /* 方案二 */
        }
    </style>

</head>

<body>
    <div class="box">
        <img src="img/mi.png" alt="">
    </div>
</body>

来看看结果吧！！！
在这里插入图片描述
可以收藏，以备后用哦

太想进步了

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片底部出现空白间隙原因及解决方案

我们在给盒子里放图片时，图片总是离盒子底部还有一段白色间隙，这让强迫症表示很不舒服以下我们来说说产生原因以及解决方案吧因为行内块元素（这里的图片）默认是与文字基线对齐的，看到那个字母p与其他字母区别了吧，p下面的线是底线，而与大多数字母对齐的是基线，所以图片产生一条空白缝隙解决方案：设置图片与文字的对齐方式为其他方式（top/middle/bottom）因为行内块与行内元...
复制链接

扫一扫