如何使用 CSS 去除图片下方的多余空白
答案：使用 CSS display 属性
如果您尝试将图像放入带边框的 <div> 元素中，您会在图像底部看到一个额外的空白区域（大约 3 像素）。 发生这种情况是因为 image 是 inline-level 元素，所以浏览器在基线下添加了一些空格来调整其他内联元素。
解决这个问题最简单的方法是将图片的默认display值从inline改为block，即在图片上应用样式display:block;，如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove White Space Below Images</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>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements