При оборачивании изображения в блок

1
div
внизу картинки возникает странный отступ.

Появляется он потому, что элемент

1
img
является строчным
1
inline
. При верстке часто возникает задача его убрать, так как он лишний и только портит дизайн. Решений данного вопроса существует несколько.

С тремя из них я был уже знаком благодаря замечательному ресурсу для верстальщиков - xiper.net. А вот на сайте htmlbook.ru Влада Мержевича в разделе “Практикум” узнал, что таких способ не три, а пять. С задачкой справился, а решения захотел поместить у себя.

Пять способов убрать отступ под картинкой

Создаем блок

1
div
с классом
1
.image
, для которого назначаем ширину, центрирование и границу для наглядности. Внутрь блока
1
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 блочным

Сделать элемент inline блочным - display: block

.block {
  display: block;
}

2. Задать вертикальное выравнивание

Так как элемент

1
img
является строчным
1
inline
, то к нему применимо свойство
1
vertical-align
, как к любому строчному элементу. Мне такой способ нравиться больше всего:

Элемент inline - присвоить vertical-align: top

.vertical {
  vertical-align: top;
}

3. Сделать элемент плавающим через float

Задать для элемента

1
img
свойство
1
float: left
или
1
float: right
. Если элемент делается плавающим через
1
float
, то из строчного
1
inline
он становится блочным
1
block
.

И отступ также пропадает. Только надо не забыть добавить для контейнера

1
div.image
свойство
1
overflow: hidden
, иначе пропадет граница вокруг изображения.

Что и понятно, так как при

1
float: left
или
1
float: right
элемент “вырывается” из общего потока, становится плавающим:

Элемент inline - присвоить float: left

.float {
  float: left;
}

4. Сделать картинку таблицей

Для изображения задать свойство

1
display: table
:

Элемент inline - присвоить display: table

.table {
  display: table;
}

5. Задать высоту для блока

Для блока-контейнера

1
div.image
жестко задать высоту, равную высоте изображения. В моем случае высота картинки равна 230 пикселей, поэтому и для блока-обертки задаю такую же - 230 пикселей:

Элемент inline - присвоить width

.height {
  height: 230px;
}

Все пять способов проверены мною и должны работать в реальности.

На это все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017