Как верстальщик часто сталкивался с ситуацией, когда необходима высота блока меньше 20px. Так как, пока что (думаю, осталось не долго :) ), при вёрстке все еще необходимо учитывать баги IE6, то эта проблема все еще актуальна.

Проблема

Если XHTML шаблон требует от нас высоту некоторого div блока меньше 20px, то код вида:

<div style="height:10px; background-color:red"></div>

для IE6 не играет никакой роли. Блок будет показан с высотой в 20px, не смотря на конкретно указаную высоту в 10px.

Способы решения

1. Пожалуй, самый простой и эфективный - и, по сути, способ, которым пользуюсь, - это вставка XHTML комментария в блок, т.е.:

<div style="height:10px; background-color:yellow"><!-- --></div>

2. Добавить неразрывный пробел   в середину блока и CSS описание font-size:1px; line-height:0:

<div style="height:10px; font-size:1px; line-height:0; background-color:green">&nbsp;</div>

Возможно есть еще способы (добавлю, по мере нахождения), но, как я уже писал, первый является самым простым и эффективным. Также, стоить отметить, что приведенные способы являются кросс-браузерными, так что, проблем с другими браузерами не должно возникнуть.

Источник: http://archivist.incutio.com/viewlist/css-discuss/39150.