Итоги

В этом уроке мы узнали, что:

• Preflight убирает внешние и внутренние отступы, которые браузеры дают элементам, поэтому каждый отступ вы добавляете сами.
• Шкала отступов Tailwind состоит из шагов по 0.25rem, то есть по 4 пикселя: p-1 — это 4 пикселя, p-4 — 16, p-8 — 32. Выбор из нескольких шагов делает отступы всего сайта единообразными.
• p-* задаёт внутренний отступ со всех сторон, px-* — слева и справа, py-* — сверху и снизу, а pt-*, pr-*, pb-* и pl-* — с одной стороны.
• Внешние отступы устроены так же, только с m: m-*, mx-*, my-*, mt-*, mr-*, mb-* и ml-*. Между элементами, идущими друг под другом, проще всего делать отступ только с одной стороны, например с помощью mt-*.
• Порядок классов в class не важен: класс для одной стороны (pt-8) побеждает класс для всех сторон (p-4). Не давайте элементу два класса для одного и того же.
• w-* и h-* задают ширину и высоту по той же шкале (w-64 — это 256 пикселей). w-full — это ширина родителя, дроби вроде w-1/2 — её доля, а w-screen и h-screen — размер окна.
• max-w-sm, max-w-md и другие задают максимальную ширину, поэтому на узких экранах элемент сужается. Вместе с mx-auto они создают колонку по центру, как наша карточка.
• Высоту обычно лучше оставлять на усмотрение содержимого. min-h-screen делает элемент не ниже окна.
• size-* задаёт ширину и высоту сразу, а leading-* тоже принимает числа шкалы.
• В квадратных скобках можно написать любое значение CSS, например bg-[#fdf6ec] или w-[350px] (произвольные значения), без пробелов. Используйте их только как исключение: шкала и палитра сохраняют единообразие сайта.
• Панель Ширина просмотра показывает страницу шириной с телефон (375 px) или с экран компьютера.

Теперь у карточки Луны есть место внутри и вокруг неё и разумная ширина, и на любом экране она остаётся посередине страницы. Дальше вас ждёт небольшой проект, в котором вы самостоятельно оформите целую страницу, используя всё из первых трёх уроков. А затем в уроке «Рамки, тени и изображения» вы добавите таким карточкам рамки, скруглённые углы, тени и картинку.

Для практики мы добавили под карточкой объявление с адресом приюта. Задайте ему отступы и ширину с помощью того, что вы узнали в этом уроке.