Лишний отступ внизу блока, содержащего img

CSS
main div.image { display: block; width: 100%; }
main div.image img { width: 100%; height: auto; }
HTML

Проблема в том, что этот код (да даже без любого CSS, просто картинка в другом теге) добавляют дополнительное пространство снизу родительского блока.

Вы можете заметить, что сама картинка уже "закончилась", но родительскому блоку все равно снизу добавляется некоторое свободное пространство. С чем это связано и как от этого избавиться - вопрос. Хотя, может быть, это нормально и добавляется вне зависимости от моего желания, прямо как margin'ы у p. Хотя от них можно избавиться.

Ответ

Картинка, по умолчанию, отображается как строковый элемент, на который влияет высота строки. Именно высота строки ответственна за расстояние между div и img
Решения два:
Обнулить высоту строки для обертки. Сделать картинку блочным элементом.
.holder { border: 1px solid lime; outline: 1px solid #000; width: 100px; } .fix-1 { line-height: 0; } .fix-2 img { display: block; }