Откуда у блока с картинкой появляется лишнее поле?

Question

[GreenMan1899]

закрасил зеленым

Answer 1

[PiggyPig]

Попробуйте задать div'у line-height: 0 и увидите, что лишняя область пропала. При увеличении значения увеличивается и отступ в блоке.
А вообще задайте изображению display: block, тогда родительский блок примет его высоту.

Answer 2

[Arman]

Это пробел. Надо или размер шрифта в 0 сделать "font-size: 0;" или убрать все пробелы между тэгами; как вариант можно комменты наставить </div><!--><img>

Comments

[PiggyPig]

Пробелы между тегами влияют на списки и строчные элементы. К блокам это не относится.
Попробуйте

[Arman]

PiggyPig: на строчно-блочные элементы тоже влияют, обычно пытаются избавиться от пробела или размер шрифта в этом блоке сделать 0, а потомкам вернуть нужный размер. Если размер в 0 точно заметят, то line-height: 0; могут и не заметить и назад не вернуть. Он вроде тоже наследуется?

[PiggyPig]

Arik: Я говорил по поводу пробелов между тегами. Откройте пример, скинутый автором вопроса и уберите пробелы между тегами. Разницы не увидите никакой, чего не скажешь о тех же списках li.
Насчет шрифтов и line-height. Чтобы привести в порядок блочные элементы никогда не пользовался данными махинациями. Пусть они решают вопросы с текстом, а для блоков своего добра достаточно.

Answer 3

[Михаил Захаров]

line-height: 0px;