Отрицательные поля

До сих пор все кажется довольно простым, и вы, наверное, уже удивляетесь, почему я говорил, что здесь могут быть какие-то сложности. У полей есть и другая сторона – отрицательная. Все верно, существует возможность задания отрицательных значений полей. В результате возникают некоторые интересные эффекты, если предположить, что агент пользователя вообще поддерживает отрицательные поля. Согласно спецификации CSS от агентов пользователя не требуется полностью поддерживать отрицательные поля. Там сказано: «Отрицательные значения для свойств полей допускаются, но возможны зависящие от реализации ограничения». На момент написания данной книги в броузерах имеется несколько подобных ограничений.

Помните, что сумма значений семи свойств горизонтального форматирования всегда равна значению свойства width родительского элемента. Пока все свойства имеют нулевое или положительное значение, элемент никогда не может быть шире области содержимого его родителя. Однако рассмотрим следующую разметку:

div {width: 400px; border: 3px solid black;}
p.wide {margin-left: 10px; width: auto; margin-right: -50px; }

Совершенно верно, дочерний элемент шире своего родителя! Это математически верно:

10px + 0 + 0 + 440px + 0 + 0 – 50px = 400px

Величина 440px – это вычисленное значение выражения width: auto, необходимое для сохранения равенства.


Несмотря на то что в результате дочерний элемент вышел за рамки своего родителя, спецификация не нарушена, потому что значения семи свойств образуют требуемую сумму. Это семантическая хитрость, но все работает правильно. Теперь добавим сюда рамку:

div {width: 400px; border: 3px solid black;}
p.wide {margin-left: 10px; width: auto; margin-right: -50px;
border: 3px solid gray;}

В результате вычисленное значение свойства width уменьшится:

10px + 3px + 0 + 434px + 0 + 3px – 50px = 400px

Если добавить и отступы, то значение width станет еще меньше. И наоборот, можно сделать так, чтобы вычисляемый при указании ключевого слова auto размер правого поля был отрицательным. Это происходит в том случае, если значения других свойств заставляют задавать отрицательное значение правого поля, чтобы элемент не был шире своего блока-контейнера. Рассмотрим следующий пример:

div {width: 400px; border: 3px solid black;}
p.wide {margin-left: 10px; width: 500px; margin-right: auto;
border: 3px solid gray;}

Уравнение будет таким:

10px + 3px + 0 + 500px + 0 + 3px – 116px = 400px

Вычисленное значение ширины правого поля составит –116px.


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

div {width: 400px; border: 3px solid black;}
p.wide {margin-left: -50px; width: auto; margin-right: 10px;
border: 3px solid gray;}

При отрицательном значении поля слева абзац выходит за границы не только элемента div, но и за край самого окна броузера!

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание