Summary

In this lesson, we learned that:

• Preflight removes the margins and paddings that browsers give elements, so you add every space yourself.
• Tailwind's spacing scale has steps of 0.25rem, that is 4 pixels: p-1 is 4 pixels, p-4 16 and p-8 32. Choosing from a few steps keeps the spacing of the whole site consistent.
• p-* sets the padding on all sides, px-* on the left and right, py-* at the top and bottom, and pt-*, pr-*, pb-* and pl-* on a single side.
• Margins work the same way with m: m-*, mx-*, my-*, mt-*, mr-*, mb-* and ml-*. Between elements below each other, it's simplest to make space from one side only, for example with mt-*.
• The order of the classes in class doesn't matter: a class for one side (pt-8) wins over a class for all sides (p-4). Don't give an element two classes for the same thing.
• w-* and h-* set the width and the height on the same scale (w-64 is 256 pixels). w-full is the width of the parent, fractions such as w-1/2 a share of it, and w-screen and h-screen the size of the window.
• max-w-sm, max-w-md and the others set a maximum width, so the element shrinks on narrow screens. Together with mx-auto, they make a centered column, like our card.
• Heights are usually best left to the content. min-h-screen makes an element at least as tall as the window.
• size-* sets the width and the height at once, and leading-* takes numbers of the scale too.
• In square brackets, you can write any CSS value, such as bg-[#fdf6ec] or w-[350px] (arbitrary values), without spaces. Use them only as an exception: the scale and the palette keep the site consistent.
• The Preview width bar shows the page as wide as a phone (375 px) or a computer screen.

Luna's card now has room inside and around it and a sensible width, and it stays in the middle of the page on any screen. In the next lesson, Borders, Shadows and Images, you'll give cards like this one borders, rounded corners, shadows and a picture.

For practice, we've added a notice with the shelter's address below the card. Give it space and a width with what you've learned in this lesson.