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

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Владимир Токмаков
(vlalek@design.ru)

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

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |