Почему появился отступ?

Question

[lynnikvadim]

https://jsfiddle.net/lynnik_vadim/jcrnhqdt/

Почему появился отступ от картинки мото до блока сонтент?

Answer 1

[Евгений Петров]

Можем использовать vertical-align (img — строчный элемент)
HTML
<img src="..." class="image">
CSS

.image {
    width: 100%;
    vertical-align: top;
}

Пример
А тут про вертикальное выравнивание с картинкой CSS: Почему происходит смещение изображения при line-height идентичной высоте блока?

Answer 2

[Денис Инешин]

https://jsfiddle.net/IonDen/jcrnhqdt/1/
display: block нужен

Answer 3

[Алексей Зуев]

По умолчанию, изображение ведет себя как текст оставляя пространство под ним некоторое пространство, зависящее от размера шрифта и линии (как подметил Евгений Петров). Текст оставляет пространство под собой для того, чтобы мы смогли видеть нижние начертания символов "у" "р". Проблема с img решается с помощью свойства vertical-align. Можно задать почти любое значение этого свойства чтобы решить эту проблему, к примеру

img {
  vertical-align: middle;
}

Comments

[Евгений Петров]

Не сколько именно пикселей — зависит от размера шрифта и линии.

[Алексей Зуев]

Евгений Петров: пожалуй соглашусь с этим