图片底侧空白缝隙解决方案（HTML、CSS）

不易撞的网名

于 2021-08-12 15:30:09 发布

阅读量145

点赞数

分类专栏：前端文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_50569789/article/details/119645651

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

本文探讨了如何使用HTML和CSS解决图片底部出现空白缝隙的问题。通过尝试不同的vertical-align属性和设置display为block，可以有效地消除图片周围的空白。这个技巧对于前端开发者优化网页布局至关重要。

摘要由CSDN通过智能技术生成

图片底侧空白缝隙解决方案（HTML、CSS）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片底侧空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid red;
        }

        img {
            /* vertical-align: bottom; */
            /*   vertical-align: middle; */
            /*  vertical-align: top; */
            /* 都可解决图片底侧空白缝隙解决方案 */

            display: block;
            /* 删掉文字即可看到效果 */
        }
    </style>
</head>

<body>
    <div>
        <img src="jt.png" alt="">ppa
    </div>
</body>

</html>

不易撞的网名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片底侧空白缝隙解决方案（HTML、CSS）

图片底侧空白缝隙解决方案（HTML、CSS）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片底侧空白缝隙解决方案</title> <style&gt
复制链接

扫一扫