Отступ снизу становится хорошо заметен, когда изображение помещено в контейнер с цветным фоном или рамкой (рис. 1).
Рис. 1. Отступ под изображением
Такой отступ возникает из-за того, что элемент <img> воспринимается как строчный, а для строки браузер оставляет снизу место для выносных элементов букв. Такие буквы как д, р, у, ц, щ, g и др. имеют «хвостик» ниже базовой линии текста (рис. 2), для которых и требуется свободное пространство.
Рис. 2. Базовая линия текста
Рассмотрим несколько популярных методов устранения отступов у картинок.
Свойство display
Поскольку отступ возникает из-за того, что элемент <img> воспринимается как строчный, его следует преобразовать в блочный элемент. Для этого применяется свойство display со значением block (пример 1).
Пример 1. Использование display
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Изображение</title>
<style>
.card {
border: 1px solid #333; /* Параметры рамки */
display: inline-block; /* По ширине картинки */
}
.card > img {
display: block; /* Блочный элемент */
}
</style>
</head>
<body>
<div class="card">
<img src="image/es6.svg" alt="ES6" width="150">
</div>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. Изображение без отступа снизу
Свойство vertical-align
vertical-align используется для выравнивание строчных элементов по вертикали. Достаточно изображениям задать выравнивание по нижнему краю (значение bottom), как никакого отступа не останется (пример 2).
Пример 2. Использование vertical-align
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Изображение</title>
<style>
.card {
border: 1px solid #333; /* Параметры рамки */
display: inline-block; /* По ширине картинки */
}
.card > img {
vertical-align: bottom; /* Выравнивание по нижнему краю */
}
</style>
</head>
<body>
<div class="card">
<img src="image/es6.svg" alt="ES6" width="150">
</div>
</body>
</html>
Работа с текстом
Часть методов устранения отступа основаны на стилевых свойствах, работающих непосредственно с текстом. К примеру, свойство font-size устанавливает размер шрифта, и если для контейнера с изображением задать нулевой размер текста, то и отступ станет нулевым.
.card {
border: 1px solid #333; /* Параметры рамки */
display: inline-block; /* По ширине картинки */
font-size: 0; /* Размер шрифта */
}
Свойство line-height устанавливает высоту строки текста и, опять же, нулевое значение влияет на строчные элементы и делает отступ нулевым.
.card {
border: 1px solid #333; /* Параметры рамки */
display: inline-block; /* По ширине картинки */
line-height: 0; /* Высота строки */
}
Учтите, что приведённые методы не подходят для блоков, в которых одновременно встречаются изображения и текст. Они вносят сильные искажения в текст, в результате он перестанет отображаться нужным образом.