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

Новости

Инвентарь

HTML и CSS XSLT JavaScript Изображения Софт Etc

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

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

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

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

<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>

Поделиться ссылочкой:

Электропочта:
Телефон: (+7 495) 926-18-00

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

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