Долой трехпиксельный отступ в IE!

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

18 сентября 2005


Для просмотра этого примера необходим IE.

Задача.

Избавиться от отступа в 3 пикселя, возникающего у элементов c заданным float: left при просмотре в IE.

Решаем задачу благодаря возможности указания отрицательного значения свойства margin. При этом родительскому элементу задаем минимально возможную высоту.

Как это выглядит в браузере

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
<style type="text/css">
    #example { width:  15em; }
    #example input { float: left; }
    #example label { margin-left: 20px; display: block; }
    /* достаточные правила */
    .selector { clear: left; //height: 1px; }
    .selector input { float: left; margin-right: -20px }
    .selector label { margin-left: 20px; display: block; }
</style>
<form id="example">
    <div>
        <input type="checkbox" name="some" value="0" id="some_0" />
        <label for="some_0">после второй строки появляется отступ,
            нарушающий левую границу текста</label>
    </div>
    <div class="selector">
        <input type="checkbox" name="some" value="1" id="some_1" />
        <label for="some_1">а&nbsp;здесь после второй строки
            такого отступа нет, левая граница ровная</label>
    </div>
</form>