Откуда появились лишние 4 пикселя?

Question

[FilatovNikita]

Картинка со стрелкой 60 пискелей, находится в диве wrapper, высоты не указаны, а у самого wrapper высота стала 64px откуда они появились, картинка должна быть полностью прижата к низу

Answer 1

[Alexander Pushkarev]

Для картинки в блоке

img { 
    display: block; 
}

Чтобы по центру поставить:

img { 
    display: block; 
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

Comments

[FilatovNikita]

Да и правда, а можете объяснить почему так происходит ?

[FilatovNikita]

Спасибо большое! если бы еще объяснили почему так происходит было бы здорово !

[Alexander Pushkarev]

FilatovNikita: у изображения по умолчанию display: inline-block; а у inline-block отступ от природы.

[FilatovNikita]

Alexander Pushkarev: И его даже отладчиком нельзя увидеть получается ?

[Alexander Pushkarev]

FilatovNikita: ну у меня не отображается. Это нужно просто знать и всё

[FilatovNikita]

Alexander Pushkarev: Спасибо еще раз ! Очень помогли

[SagePtr]

FilatovNikita: потому что inline-элементы выравниваются по baseline шрифта и под ними ещё расстояние, равное высоте подстрочных элементов шрифта

[Расул Гитинов]

FilatovNikita: Я несколько раз решал проблемы такого типа. Просто у родительского блока (у которого высота - 64px) указать - font-size: 0;

Возможно поможет.

[FilatovNikita]

Расул Гитинов: Спасибо !

[pastyrmisha]

Расул Гитинов, Спасибо, помогло!