Почему добавляется +5px?

Question

[Pavel]

Почему к div'y с картинкой добавляется +5px высоты?

Answer 1

[kiberlain]

потому что картинка по умолчанию строчный (инлайновый) элемент. Все инлайновые элементы воспринимаются как строки текста, а так как у текста (у отдельных символов, например символ "y" имеет снизу "хвостик" ) то браузер специально добавляет отступы снизу-сверху, чтобы символы полностью поместились в строку по высоте. Поэтому, что бы картинка воспринималась не как строчный, а как блочный элемент надо задавать для неё правило display: block

jsfiddle.net/p2btx682

Comments

[Pavel]

спасибо

[tyzberd]

или добавить vertical-align: middle;
jsfiddle.net/p2btx682/1

Answer 2

[NichitencoEvgh]

Задай картинке в свойствах {font-size: 0;}
Это уберет у нее межстрочный инлайновый пробел и решит твою проблему.