Если вы попытаетесь поместить изображение в элемент <div>, имеющий границы, вы увидите лишнее белое пространство (около 3px) внизу изображения. Это происходит потому, что изображение является строчным элементом, поэтому браузер добавляет некоторые пробелы под базовой линией.
Самый простой способ избавиться от этой проблемы — изменить отображаемое значение изображения по умолчанию со строчного на блочное, т.е. применить стиль 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>
