Тиражирование значений

Иногда значения, вводимые для свойства margin, повторяются:

p {margin: 0.25em 1em 0.25em 1em;}

Хотя не обязательно вот так набирать пары чисел. Вот возможная замена предыдущему правилу:

p {margin: 0.25em 1em;}

Этих двух значений достаточно, чтобы заменить четыре. Но как? CSS определяет несколько правил в случае присваивания свойству margin менее четырех значений. Вот они:
• Если значение поля left пропущено, взять значение, заданное для right.
• Если значение поля bottom пропущено, взять значение, заданное для top.
• Если значение поля right пропущено, взять значение, заданное для top.

Иначе говоря, если для margin заданы три значения, то четвертое (left) копирует второе (right). Если заданы два значения, то четвертое копирует второе, а третье (bottom) копирует первое (top). И наконец, если задано только одно значение, остальные копируют его. Этот простой механизм позволяет авторам предоставлять лишь необходимое количество значений, как показано здесь:

h1 {margin: 0.25em 0 0.5em;} /* аналогично '0.25em 0 0.5em 0' */
h2 {margin: 0.15em 0.2em;} /* аналогично '0.15em 0.2em 0.15em 0.2em' */
p {margin: 0.5em 10px;} /* аналогично '0.5em 10px 0.5em 10px' */
p.close {margin: 0.1em;} /* аналогично '0.1em 0.1em 0.1em 0.1em' */

У этого метода есть небольшой недостаток, с которым вы когда-нибудь столкнетесь.


Предположим, требуется задать для элементов h1 верхнее
и левое поля в 10 пикселов и нижнее и правое поля в 20 пикселов.
В этом случае надо записать:

h1 {margin: 10px 20px 20px 10px;} /* никак нельзя сократить */

Результат достигается, но это требует некоторого времени. К сожалению, количество значений, необходимых в таких обстоятельствах, никак нельзя уменьшить. Возьмем другой пример: пусть требуется, что-бы размер всех полей вычислялся автоматически, за исключением левого поля, которое должно составлять 3em:

h2 {margin: auto auto auto 3em;}

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

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

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

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