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