FSM Full Stack Masterclass
Platform under construction
CSS course badge

Layout

Advanced

Spacing Systems

Spacing systems turn layout from guesswork into rhythm. Instead of random margins and padding, you use a repeatable scale.

:root {
  --space-4: 1rem;
  --space-12: 3rem;
}

Layout

A spacing system is visual rhythm in code.

Spacing is one of the strongest signals of design quality. Too tight feels cramped. Too loose feels disconnected. Random spacing feels amateur.

A spacing system defines reusable values for padding, gaps, section rhythm and component relationships.

CSS custom properties make spacing scales easy to reuse across cards, layouts, buttons and page sections.

Scale

A small set of spacing values used repeatedly.

Gap

Container-owned spacing between flex or grid children.

Section rhythm

Large vertical space between major content areas.

Component padding

Inner space that belongs to a reusable component.

Visual model

Layout is easier when you can name the relationship.

Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.

xs

0.5rem

Tiny internal adjustments.

sm

1rem

Default component gaps.

md

1.5rem

Cards and panels.

lg

3rem

Section separation.

Examples

Use the layout tool that matches the shape of the problem.

Tokenized spacing

:root {
  --space-2: .5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-12: 3rem;
}

Random spacing values

.card { padding: 23px; }
.grid { gap: 19px; }
.section { margin-top: 87px; }
.button { padding: 11px 27px; }

Rules that matter

Strong layout CSS stays readable when the screen changes.

Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.

Create a small scale

Too many spacing tokens becomes another form of randomness.

Use gap for child spacing

Let flex and grid containers own repeated spacing.

Separate component and section spacing

Button padding and page section rhythm are different decisions.

Use logical properties

margin-block and padding-inline describe intent clearly.

Keep rhythm consistent

Similar relationships should use similar spacing.

Adjust by context, not mood

Break the scale only when the design problem truly demands it.

Production thinking

Layout quality shows up when content stops being perfect.

Why does this matter?

Spacing is where many high-end designs get their calm. A spacing system makes that calm repeatable.

Accessibility

Clear spacing improves scanning, touch accuracy and form comprehension.

Production note

Define spacing tokens early and use them in components, layout utilities and sections.

SEO note

Well-spaced content is easier to scan, which helps visitors understand and continue reading.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Change --space-4 to 2rem and see the stack loosen.
  • Replace one token with 37px and explain why it feels random.
  • Add --space-20 and use it for section-level spacing only.

Practice assignment

Do this before moving to the next lesson.

  1. Define four spacing tokens.
  2. Use one for component padding and one for grid gap.
  3. Explain why section spacing should usually be larger.

Try it yourself

Build rhythm with spacing tokens

Live preview

Self-check

Before you continue, prove that you understand Spacing Systems.

Advanced

Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.

  1. Can you explain why spacing systems matter?
  2. Can you create a small token scale?
  3. Can you use gap instead of repeated child margins?
  4. Can you separate inner component padding from outer section rhythm?
  5. Can you avoid random pixel values?

Senior audit upgrade

Name spacing by scale and by role when needed.

A spacing system can use raw scale tokens and semantic tokens. The best choice depends on whether the value is general or tied to a component role.

Scale

--space-1, --space-2 and --space-3 are good reusable primitive tokens.

Semantic

--section-gap or --card-padding explains intent when a value has a specific job.

Gap first

Use gap for relationships inside flex and grid instead of child margin hacks.

Chapter project

Build a responsive dashboard section

Choose normal flow, flexbox, grid, positioning and spacing systems for the right layout job.

Build

a dashboard band with header, cards, action row, sticky note and clean spacing

Deliverables

  • dashboard section
  • flex action row
  • grid card area
  • sticky or positioned element

Quality checks

  • source order still logical
  • flex/grid chosen intentionally
  • no absolute layout hacks

Review question

Which parts use normal flow, flexbox and grid, and why?