The Spacing Scale

In the previous lesson, you gave the shelter's pages colors and nicely styled text. In this lesson, you'll give them room to breathe: space inside elements and between them, and the right widths and heights.

On the page, there's an adoption card for Luna. It already has classes from the previous lesson: an orange name, gray text, a white card on a light gray page and an orange button with white text. But everything is crammed together: the text touches the edges of the card, the card touches the edges of the preview, and the button fits tightly around its text.

That's Preflight's doing. Tailwind's base styles removed all the margins and paddings that browsers give elements: the gaps around headings and paragraphs, the 8 pixels around body and the padding inside buttons. So no space appears by accident: you add every one yourself, with classes. Let's start with padding, the space between an element's content and its border.

The class p-4 gives an element padding on all four sides. Its number isn't in pixels: it's a number of steps on Tailwind's spacing scale. One step is 0.25rem, which is 4 pixels (with the usual base font size of 16 pixels), so p-4 is 4 × 4 = 16 pixels:

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

(In the CSS that Tailwind makes, you'll see padding: calc(var(--spacing) * 4): the size of one step, kept in a variable named --spacing, times 4. It means the same.) These are the steps you'll use most often:

Any whole number works (p-5 is 20 pixels, p-10 40 pixels), and for small spaces, halves do too (p-0.5 is 2 pixels, p-1.5 6 pixels). A common mistake is to write pixels: p-24 isn't 24 pixels, but 24 steps, which is 96 pixels.

Why steps, and not just any number of pixels? A page looks tidy when its spaces repeat. If you choose from a few sizes, such as 8, 16, 24 and 32 pixels, the cards, buttons and boxes of the whole site line up and look like they belong together, and you don't have to decide between 15, 16 or 17 pixels each time. Designers work with such scales too. And the same scale is used for margins, widths and heights, which you'll meet in this lesson.