Лишние отступы под картинками в IE 6 и 7
Категория: СокровищаВ Internet Explorer 6 и 7, есть много неприятных особенностей, одна из них — лишние отступы под картинками. Для ясности, приведу пример:

Будем использовать следующий html код:
<div class="kiski">
<img src="киски.jpg" width="192" height="150" alt="Киски" />
</div>
CSS для нашего кода:
.kiski {
width: 192px;
height: 150px;
border: 4px solid #eca5a5;
}
В данном примере, я использую блочную верстку, но проблема появится и при верстке таблицами.
Решение проблемы до смешного просто и объясняется тем, что в ie, по умолчанию, вертикальное выравнивание картинок имеет атрибут base-line. Достаточно поменять его, в CSS, на значение:
img {
vertical-align: top;
}
Это не единственное решение проблемы, есть еще несколько, достаточно интересных способов, о которых нужно знать.
Первый способ.
Убираем все пробелы, переносы строк и отступы в коде. Конечно, это не совсем валидно W3C, но работает. Для нашего примера, код будет выглядеть следующим образом:
<div class="kiski"><img src="киски.jpg" width="192" height="150" alt="Киски" /></div>
Второй способ.
Рекомендую этот способ, при верстке таблицами, но и при верстке слоями, тоже подойдет. Нужно в CSS прописать размер шрифта для блока или ячейки в 1 пиксель. Конечно, этот способ неприменим, если вы собрались вставлять текст в этот блок. Ниже CSS код, для нашего примера:
.kiski {
width: 192px;
height: 150px;
border: 4px solid #eca5a5;
font-size: 1px;
}
Итак, мы выяснили причину нежелательных отступов в Internet Explorer 6 и 7, а также решение этой проблемы. Надеюсь, вам это помогло. Удачи!
5 ноября 2009 в 10:45
спасибо, очень помогло
21 ноября 2009 в 22:42
Лечится всего лишь одним простым свойством:
img { vertical-align: top; }
3 марта 2010 в 23:38
спасибо, мне помогло… я уж и марджины и паддинги все передёргал… а тут такое…
20 мая 2010 в 22:24
отступа не будет )
20 мая 2010 в 22:25
извиняюсь, код обрезало.
ставим br после картинки - отступ исчезает
13 июля 2010 в 12:54
Во дела, фонт сайхз 1пх, спасибо!
21 октября 2010 в 11:11
Спасибо огромное. полтора часа мучился со свойствами и только потом решил спросить у Яндекса
20 декабря 2010 в 17:20
Спасибо за подсказку
2 февраля 2011 в 15:14
Спасибо большое!
22 марта 2011 в 17:06
Спасибо
4 июня 2011 в 12:33
Спасибо, ребята
22 августа 2011 в 0:55
Параметр align=”middle” все исправет
16 марта 2012 в 15:59
а мне наоборот помогло img{vertical-align: bottom;}