How to Analyze the Spacing System Used in Any Web Design

Good-looking sites feel calm because their spacing follows a system: a small set of sizes used again and again. Once you can see that system, you can learn from it and build your own. Chrome DevTools is all you need.

1. Measure the spacing

1. Right-click an element → Inspect.
2. Hover elements in the Elements panel. The page highlights padding in green and margin in orange.
3. Open the Computed tab to see the box model with exact padding, margin and size.
4. Check gap on flex and grid containers too; much modern spacing lives there.

2. Find the base unit

Write down the values you see across buttons, cards, headings and sections. Most systems use multiples of one number:

• 4 or 8 pixels: values like 8, 16, 24, 32, 48 and 64.
• rem-based: 0.5rem, 1rem, 1.5rem, 2rem, where 1rem is usually 16 pixels.

Odd values that don't fit, such as 13 or 27 pixels, often come from borders, line heights or one-off fixes.

3. Look for spacing tokens

• Select the html element and look for CSS variables such as --space-4 or --spacing-md. These are the system written down.
• Utility classes give it away too. In Tailwind, p-4 means 1rem of padding and gap-6 means 1.5rem.

4. Separate the levels

• Inside components: small steps, such as 8 or 12 pixels inside a button or card.
• Between components: medium steps, such as 24 or 32 pixels between cards.
• Between sections: large steps, such as 64 to 128 pixels.

Clear jumps between the levels are what make a layout easy to scan.

5. Check it on a phone

Toggle the device toolbar (Ctrl + Shift + M) and compare. Many sites shrink section spacing on small screens, either at breakpoints or smoothly with clamp().

6. Build your own scale

Pick a base, choose six to ten steps and use only those. The spacing scale generator creates a scale as CSS variables, and the fluid spacing generator writes clamp() values that grow with the screen.

Keep going

Spacing works with the grid and type scale. See identifying a site's grid and working out a whole design system. Want a second opinion on your own site's layout? Get a free website audit.