При оборачивании изображения в блок
div
внизу картинки возникает странный отступ.
Появляется он потому, что элемент img
является строчным inline
.
При верстке часто возникает задача его убрать, так как он лишний и
только портит дизайн. Решений данного вопроса существует несколько.
С тремя из них я был уже знаком благодаря замечательному ресурсу для верстальщиков - xiper.net. А вот на сайте htmlbook.ru Влада Мержевича в разделе “Практикум” узнал, что таких способ не три, а пять. С задачкой справился, а решения захотел поместить у себя.
Пять способов убрать отступ под картинкой
Создаем блок div
с классом .image
, для которого назначаем ширину, центрирование и границу для наглядности. Внутрь блока div.image
помещаем картинку:
<div class="image">
<img src="img/charlize_theron.jpg" width="307" height="230" alt="Charlize Theron">
</div>
.image {
border: 2px solid #000;
width: 307px;
margin: 0 auto;
}
Видим этот отступ под изображением:
И пробуем пятью различными способами убрать этот отступ.
1. Сделать элемент img блочным
.block {
display: block;
}
2. Задать вертикальное выравнивание
Так как элемент img
является строчным inline
, то к нему применимо свойство vertical-align
, как к любому строчному элементу. Мне такой способ нравиться больше всего:
.vertical {
vertical-align: top;
}
3. Сделать элемент плавающим через float
Задать для элемента img
свойство float: left
или float: right
. Если элемент делается плавающим через float
, то из строчного inline
он становится блочным block
.
И отступ также пропадает. Только надо не забыть добавить для контейнера div.image
свойство overflow: hidden
, иначе пропадет граница вокруг изображения.
Что и понятно, так как при float: left
или float: right
элемент “вырывается” из общего потока, становится плавающим:
.float {
float: left;
}
4. Сделать картинку таблицей
Для изображения задать свойство display: table
:
.table {
display: table;
}
5. Задать высоту для блока
Для блока-контейнера div.image
жестко задать высоту,
равную высоте изображения. В моем случае высота картинки равна 230
пикселей, поэтому и для блока-обертки задаю такую же - 230 пикселей:
.height {
height: 230px;
}
Все пять способов проверены мною и должны работать в реальности.
На это все.
Комментарии