Xiper

IMG внутри блока — убираем странный отступ

Автор: Александр Головко Дата публикации:

Иногда, например, при верстке каталога товаров или фотографий, возникает необходимость разместить 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 by Сергей. Еще один вариант убрать отступ — задать блоку-контейнеру line-height:0.

Update by Егор Скорняков. Также помогает font-size: 1px; (не сработает в Opera 9.5 и младше).

Материалы

  • MDN :: Images, Tables, and Mysterious Gaps