# Spacing and Sizing — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/c-space

> Padding, margin, gap, width and height.

## One spacing scale everywhere

Spacing utilities share one scale: `p-4` (padding), `px-6` (horizontal), `mt-2` (margin-top), `gap-4` (gap between flex or grid items), `space-y-4` (vertical space between children). Sizing uses the same numbers (`w-64`, `h-12`) plus fractions (`w-1/2`), `w-full`, `w-screen`, `min-h-dvh` and `max-w-prose`. `size-10` sets width and height together. Negative margins use a leading dash: `-mt-2`.

## The design scale

A consistent scale for spacing, type and colour is what makes Tailwind designs look coherent.

![Three ideas: spacing and sizing, typography, colour.](assets/figures/tailwind/section-2-map.svg) — Figure 2.1 — Spacing, typography and colour.

## A profile row

Spacing and sizing working together.

```html
<div class="flex items-center gap-4 p-4 max-w-md">
  <img class="size-12 rounded-full" src="/avatar.jpg" alt="Asha">
  <div class="min-w-0">
    <p class="font-medium truncate">Asha Verma</p>
    <p class="text-sm text-gray-500">Frontend engineer</p>
  </div>
</div>
```

## Prefer gap over margins between items

gap applies spacing between flex and grid children without extra rules for the first or last item.

**Quiz:** With the default spacing of 0.25rem, how much padding does p-4 give?

- [ ] 4px
- [x] 1rem
- [ ] 4rem
- [ ] 0.4rem

*Answer:* 1rem. 4 × 0.25rem.