IMG внутри блока — убираем странный отступ
Дата публикации: 22.10.2010
Иногда, например, при верстке каталога товаров или фотографий, возникает необходимость разместить img непосредственно внутри ссылки. И тут на арене появляется довольно-таки странный баг.
Проблема
Если тег img лежит внутри блочного элемента (в том числе элемента, ставшего блочным благодаря правилам display:block или float:left/right), то в большинстве популярных браузеров сразу под img появляется странный отступ в несколько пикселей.
Аномальный отступ
На рисунке показан img с размерами 100x100px, обрамленный ссылкой для которой прописаны следующие правила:
a{
border:2px solid #539127;
float:left;
}
Высота ссылки получилась не 104px, как можно было рассчитывать, а 107! Самое смешное, что отступ есть в Opera, FF, Chrome, Safari, IE8. А вот в IE6-7 все нормально!
Когда я столкнулся с таким поведением браузеров, первым желанием было по-привычке «лечить» именно IE6-7 и заставить их отобразить этот странный отступ.
В реальности никакой мистики нет. Все дело в том, что это особенность стандарта. Картинки по умолчанию — строчные элементы и выравниваются по базовой линии текста, а базовая линия проходит несколько выше, чем нижний край блока — ведь еще резервируется место под «хвостики» букв (за пояснение спасибо SelenIT).
причина отступа — vertical-align:baseline
Тем не менее, зачастую отступ не нужен, поэтому лекарство будем выписывать именно нормальным браузерам.
Решение
Для того, чтобы отступ пропал, достаточно (на выбор) прописать для img или display:block или vertical-align:top/middle/bottom.
img{
display:block;
}
Демо пример. Проверено в:
- IE 6-8
- Firefox 3.0-3.6
- Opera 9.5-10.5
- Safari 4
- Chrome 5
Update 3.11.2010 by Сергей. Еще один вариант убрать отступ — задать блоку-контейнеру line-height:0.
Update 11.11.2010 by Егор Скорняков. Также помогает font-size: 1px; (не сработает в Opera 9.5 и младше).