Внутренний отступ с одной стороны

Кнопка по-прежнему плотно обхватывает свой текст: Взять Луну. Обычно кнопкам нужно больше места слева и справа, чем сверху и снизу: Взять Луну. Класс p-* задаёт все четыре стороны одинаково, поэтому для направлений и отдельных сторон в Tailwind есть другие классы внутреннего отступа:

Буквы — это сокращения английских слов: t — top (верх), r — right (право), b — bottom (низ), l — left (лево). x и y — оси, знакомые вам по математике: x — горизонтальная (слева и справа), y — вертикальная (сверху и снизу). (На самом деле Tailwind записывает px-4 как padding-inline: 1rem, а py-4 — как padding-block: 1rem. В языках, которые пишутся слева направо, эти свойства означают внутренние отступы слева и справа, сверху и снизу.)

Классы можно сочетать: p-4 pt-8 задаёт элементу 16 пикселей с каждой стороны, кроме верхней, где будет 32. Класс для отдельной стороны побеждает независимо от порядка классов: Tailwind ставит в своём CSS правила для отдельных сторон после правила для всех сторон, а из двух правил одинаковой специфичности побеждает более позднее — вы знаете это по каскаду. (Порядок классов в атрибуте class никогда не имеет значения.) Но, как вы видели в прошлом уроке, не давайте элементу два класса для одного и того же, например p-4 p-6: по HTML не понять, какой из них победит.