Несколько значений сразу

Если записывать каждую сторону отдельно, кода получается много. Поэтому padding и margin могут принимать до четырёх значений:

• Одно значение задаёт все четыре стороны: padding: 10px.
• Два значения: первое — для верха и низа, второе — для левой и правой сторон: padding: 10px 20px.
• Четыре значения идут по часовой стрелке от верха: верх, право, низ, лево. Например, margin: 0 0 10px 0 задаёт внешний отступ 10 пикселей снизу и ноль с остальных сторон. Запомнить порядок поможет английское слово TRouBLe: Top, Right, Bottom, Left (верх, право, низ, лево).

(Вам могут встретиться и три значения: верх, затем левая и правая стороны, а затем низ.)

Есть ещё одна вещь, которую нужно знать о внешних отступах. Когда две карточки с отступами по 20 пикселей расположены одна над другой, можно ожидать промежутка в 40 пикселей: 20 под первой и 20 над второй. Но вертикальные внешние отступы соседних элементов перекрываются: промежуток равен большему из двух отступов, то есть здесь 20 пикселям. Это называется схлопыванием внешних отступов (margin collapsing).