• Техногрет
  • Долой трехпиксельный отступ в 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>