Колесо для сокращённых свойств

Установка четырёх значений

Когда все четыре стороны (верхняя, нижняя, левая и правая) участвуют в свойстве CSS, то свойство CSS также действует как сокращённое свойство.

Например, свойство padding может использоваться как самостоятельно для применения одного значения для всех четырёх сторон, так и предлагается в четырёх вариантах (padding-top, padding-bottom, padding-left и padding-right), чтобы нацелиться на конкретную сторону.

blockquote { padding: 20px; }
/* Это эквивалентно */
blockquote { padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; }

Но свойство padding становится интересным тем, что оно может получить до четырёх значений. Таким образом, вы можете установить разное значение для всех сторон сразу:

blockquote { padding: 20px 0 10px 50px; }

Порядок следующий: сверху, справа, снизу и слева.

Установка двух или трёх значений

Установив два значения, первое из них будет применяться сверху и снизу, второе — справа и слева:

blockquote { padding: 20px 0; }
/*
       сверху
        20px
слева         справа
  0             0
       снизу
       20px
*/

Как запомнить порядок сокращений

Есть простой способ запомнить, какое значение будет применено.

Вместо того чтобы сосредоточиться на значениях, которые вы ввели, думайте о значениях, которые вы не ввели.

• Если вы вводите два значения (сверху/справа), то опускаете установку снизу и слева. Поскольку низ это вертикальный аналог верха, то будет использоваться значение верха. И поскольку, слева это горизонтальный аналог справа, то будет использоваться значение справа.
• Если вы ввели три значения (сверху/справа/снизу), то опускаете установку слева. Как аналог справа, будет использоваться это значение.

Другие свойства, для которых действует «колесо» сокращений

Любое свойство, которое применяется ко всем четырём сторонам:

• margin
• padding
• border-width

Таким образом, border является сокращенным свойством, которое включает border-width, другое сокращённое свойство?

На самом деле да. border (в таком порядке) — это сокращение для:

• border-width
• border-style
• border-color

Однако, вы не можете смешивать два свойства:

blockquote { border: 1px 0 solid green; }
/* Не работает */

Но вы можете опустить толщину в border и установить её отдельно:

blockquote { border: solid yellow; border-width: 1px 0; }

Перейти к заданиям