Шкала отступов

В прошлом уроке вы раскрасили страницы приюта и красиво оформили текст. В этом уроке вы дадите им простор: пространство внутри элементов и между ними, а также подходящие ширину и высоту.

На странице есть карточка кошки Луны, которую можно взять из приюта. В ней уже есть классы из прошлого урока: оранжевое имя, серый текст, белая карточка на светло-серой странице и оранжевая кнопка с белым текстом. Но всё сжато: текст упирается в края карточки, карточка — в края окна просмотра, а кнопка плотно обхватывает свой текст.

Это работа Preflight. Базовые стили Tailwind убрали все внешние и внутренние отступы, которые браузеры дают элементам: промежутки вокруг заголовков и абзацев, 8 пикселей вокруг body и отступ внутри кнопок. Поэтому ни один отступ не появляется случайно: вы добавляете каждый сами, с помощью классов. Начнём с внутреннего отступа (padding) — пространства между содержимым элемента и его рамкой.

Класс p-4 задаёт элементу внутренний отступ со всех четырёх сторон. Число в нём — не пиксели, а количество шагов шкалы отступов Tailwind. Один шаг — это 0.25rem, то есть 4 пикселя (при обычном базовом размере шрифта 16 пикселей), поэтому p-4 — это 4 × 4 = 16 пикселей:

.p-4 {
	padding: 1rem; /* = 16 px */
}

(В CSS, который создаёт Tailwind, вы увидите padding: calc(var(--spacing) * 4): размер одного шага, хранящийся в переменной --spacing, умноженный на 4. Это значит то же самое.) Вот шаги, которые вы будете использовать чаще всего:

Подойдёт любое целое число (p-5 — это 20 пикселей, p-10 — 40), а для небольших отступов ещё и половинки (p-0.5 — 2 пикселя, p-1.5 — 6). Частая ошибка — писать пиксели: p-24 — это не 24 пикселя, а 24 шага, то есть 96 пикселей.

Почему шаги, а не любое количество пикселей? Страница выглядит аккуратно, когда её отступы повторяются. Если выбирать из нескольких размеров, например 8, 16, 24 и 32 пикселя, то карточки, кнопки и блоки всего сайта выравниваются и смотрятся как единое целое, а вам не нужно каждый раз решать между 15, 16 и 17 пикселями. Дизайнеры тоже работают с такими шкалами. И та же шкала используется для внешних отступов, ширины и высоты, с которыми вы познакомитесь в этом уроке.