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

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

div {border: 1px dotted gray; margin: 1em;}
p {margin: 1em; border: 1px dashed silver;}
p.one {margin: 0 -1em;}
p.two {margin: -1em 0;}

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

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

div {background: silver; border: 1px solid;}
p {margin: 1em;}
p.punch {background: white; margin: 1em -1px 1em 25%;
border: 1px solid; border-right: none; text-align: center;}
p.mond {background: #333; color: white; margin: 1em 3em -3em -3em;}

Благодаря отрицательному нижнему полю сдвинутого абзаца, низ его родительского элемента поднят вверх, а параграф выступает за нижний край своего родителя.


Говоря о верхних и нижних полях, важно также помнить, что смежные вертикальные поля в нормальном потоке будут сворачиваться; это мы рассматривали в предыдущей главе. Сворачивание полей встречается практически в каждом документе. Например, вот простое правило:

p {margin: 15px 0;}

В результате абзацы будут разделены полем в 15 пикселов. Если бы поля не сворачивались, промежуток между двумя смежными абзацами составлял бы 30 пикселов, но такое поведение не соответствовало бы ожиданиям авторов. Однако это означает, что при стилевом оформлении полей необходимо соблюдать аккуратность. Скорее всего, потребуется убрать промежуток между заголовком и следующим абзацем. Поскольку абзацы в HTML-документах имеют верхнее поле, недостаточно просто задать нулевое нижнее поле для заголовка; надо убрать верхнее поле абзаца. С помощью сестринского селектора CSS2 сделать это очень просто:

h2 {margin-bottom: 0;}
h2 + p {margin-top: 0;}

К несчастью, поддержка сестринских селекторов броузерами довольно ограниченна (на момент написания данной книги), и большинство пользователей увидят промежуток в 1em между заголовком и следующим абзацем. Желаемого эффекта можно добиться и без применения селекторов CSS2, но придется проявить смекалку:

h2 {margin-bottom: 0;}
p {margin: 0 0 1em;}

Верхнее поле над всеми абзацами действительно исчезнет, но, поскольку имеются также и нижние поля размером 1em, желаемое разделение абзацев сохранится.


Так получается потому, что обычный промежуток между абзацами в 1em представляет собой результат сворачивания полей. Таким образом, если убрать одно из этих полей – в данном случае верхнее – визуальный результат будет таким же, как если бы вы оставили поле на месте.

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

Статьи из раздела CSS на эту тему:
Абсолютные значения и поля
Задание рамки одним свойством
Несколько стилей
Основные блоки элементов
Отступ с одной стороны

Вернуться в раздел: CSS / 8. Отступы, рамки и поля