Type, space & the box model

01Build a readable rhythm

Use a comfortable line height and limit the width of long text. Rem units follow the root font size, which is often 16px but can be changed by the browser, user or stylesheet.

body { font-family: system-ui, sans-serif; line-height: 1.7; }
article { max-width: 65ch; margin-inline: auto; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }

02Inside and outside spacing

Padding is space inside the border. Margin is space outside it. With border-box, the declared width includes padding and borders.

*, *::before, *::after { box-sizing: border-box; }
.card { width: 300px; padding: 24px; border: 1px solid; }

03Use a small spacing scale

Repeated spacing values make a page feel consistent. You do not need a unique margin for every element. Start with a few values and adjust deliberately.

:root { --space-1: 8px; --space-2: 16px; --space-3: 24px; }
.card { padding: var(--space-3); }
.card p { margin-block: var(--space-2); }

04Try it yourself

Change padding to 8px, then 40px. Keep the card width the same.

EDITABLE EXAMPLE

<style>
* { box-sizing: border-box; }
.card { max-width: 360px; border: 1px solid #aaa; padding: 24px; }
p { line-height: 1.8; }
</style>
<div class="card"><h2>Room to read</h2><p>Spacing gives each idea a little room. The border surrounds both the content and its padding.</p></div>

HTML & CSS only. Scripts and form submissions are disabled.