Table of Contents
CSS Spacing
—the breathing room inside and around elements
Spacing is how a layout breathes.
It is the quiet force that shapes comfort, clarity, and rhythm.
In CSS, spacing appears in two forms:
- inside an element (padding)
- around an element (margin)
Together, they create the emotional temperature of a page
— tight, open, calm, dense, or balanced.
Spacing tells us:
- how close or far elements feel from each other
- how comfortable text feels inside its container
- how sections separate or connect
- how rhythm repeats down the page
- how hierarchy is expressed without decoration
Spacing is not simply decoration.
It is structure made gentle.
When we understand spacing,
we can describe intentions clearly.
Examples of what to say:
“Give this element more breathing room.”
“Tighten the spacing between these siblings.”
“Keep the internal padding but reduce the external margin.”
“Let the spacing express the hierarchy.”
Spacing is the simplest way to change
how a layout feels
without changing its meaning.
Why Spacing matters when working with AI
AI can generate correct CSS
while still missing the tone of the layout.
Spacing is how we guide that tone.
When we name the spacing, we tell AI:
- what should feel open
- what should feel tight
- what should separate
- what should group
- what must remain untouched
This turns layout refinement into
a predictable collaboration.
Related concepts
- Flow — the natural stacking that spacing builds on
- Parent/Child — the elements spacing separates or connects
- Hierarchy — how spacing signals importance
- Density — how tightness or openness shapes tone
Tony de Araujo —New York | Lisbon