如何使用 CSS 去除图片下方的多余空白

最新推荐文章于 2024-08-17 12:43:01 发布

qq_25153359

最新推荐文章于 2024-08-17 12:43:01 发布

阅读量537

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_25153359/article/details/139353260

版权

答案:使用 CSS `display` 属性

如果您尝试将图像放入带边框的 <div> 元素中，您会在图像底部看到一个额外的空白区域（大约 3 像素）。发生这种情况是因为 image 是 inline-level 元素，所以浏览器在基线下添加了一些空格来调整其他内联元素。

解决这个问题最简单的方法是将图片的默认display值从inline改为block，即在图片上应用样式display:block;，如下图:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>删除图像下方的空白</title>
<style>
    .img-box{
        width: 125px;
        border: 4px solid #333;
    }
    .img-box img{
        display: block;
    }
</style>
</head>
<body>
    <div class="img-box">
        <img src="images/club.jpg" alt="Club Card">
    </div>
</body>
</html>