Как убрать у картинки отступ снизу?
Отступ снизу становится хорошо заметен, когда изображение помещено в контейнер с цветным фоном или рамкой (рис. 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 data-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; /* Высота строки */ }Учтите, что приведённые методы не подходят для блоков, в которых одновременно встречаются изображения и текст. Они вносят сильные искажения в текст, в результате он перестанет отображаться нужным образом.
Автор: Влад Мержевич
Источник: webref.ru