Outer space
Margin pushes neighboring boxes away from the outside edge.
Platform under construction
Margin
Margin is outside spacing. It separates one box from another and creates rhythm between sections, cards, paragraphs and controls.
.section + .section {
margin-block-start: 5rem;
}
Box Model
Margin controls relationships between boxes.
Margin lives outside the border. It does not make the component itself more comfortable; it changes the distance between that component and other boxes.
Vertical margins can collapse in normal flow, which surprises many beginners. Two adjacent margins may combine instead of simply adding together.
Professional CSS uses margin deliberately for layout rhythm and often prefers parent gap for repeated spacing between children.
Collapse
Vertical margins in normal flow can collapse into one shared margin.
Auto margin
Useful for centering blocks or pushing flex items apart.
Logical margin
margin-block and margin-inline adapt better to writing direction.
Visual model
See the box before you change the CSS.
Layout debugging becomes much easier when you can point to the exact part of the box that creates the visual result: inner space, outer space, edge, size or overflow behavior.
Use margin-block to separate major page sections.
Use parent gap when many children need equal spacing.
Use auto margin to absorb available space in flex layouts.
Examples
Professional spacing is deliberate, not decorative guesswork.
Intentional outer rhythm
.section + .section {
margin-block-start: 5rem;
}
.stack {
display: grid;
gap: 1rem;
}
Margins everywhere
.card { margin: 17px 0 43px 9px; }
.card h2 { margin-top: 51px; }
.card p { margin-bottom: 37px; }
Rules that matter
Make every spacing and sizing decision explainable.
Box model CSS should make the interface easier to reason about. When a value cannot be explained, it usually becomes a future layout bug.
Use margin for outside space
If the space is inside the component, it is probably padding.
Prefer gap for repeated children
Grid and flex gap avoid many margin edge cases.
Know margin collapse
Collapsed vertical margins can make spacing look smaller than expected.
Use logical properties
margin-block and margin-inline describe direction more clearly.
Avoid component top margins by default
Parent layouts should usually control spacing between children.
Center with auto margin
A block with width can be centered with margin-inline: auto.
Production thinking
The box model is where visual polish becomes maintainable CSS.
Why does this matter?
Margin creates rhythm. Random margins create messy pages even when every individual component looks fine.
Accessibility
Clear spacing improves scanning and reduces accidental taps between controls.
Production note
Decide who owns spacing: parent layouts, component wrappers or page sections. Mixing all three causes drift.
SEO note
Readable spacing helps visitors consume content and stay oriented on long pages.
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.
- Replace article margins with gap on .stack.
- Change margin-inline-start and describe what moves.
- Add margin-inline: auto to .stack and explain why it centers.
Practice assignment
Do this before moving to the next lesson.
- Create three cards with margin-block spacing.
- Replace the child margins with parent gap.
- Explain which version is easier to maintain.
Try it yourself
Use margin for outer rhythm
Self-check
Before you continue, prove that you understand Margin.
Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.
- Can you explain margin as outside spacing?
- Can you describe margin collapse in simple words?
- Can you choose gap instead of repeated child margins?
- Can you center a block with margin-inline: auto?
- Can you use logical margin properties?
Senior audit upgrade
Margin collapse needs a concrete warning.
Vertical margins between blocks in normal flow can collapse into one margin. This is normal browser behavior, not a random bug.
Adjacent blocks
The larger vertical margin can win instead of both margins adding together.
Parent and child
A first or last child margin can appear to escape its parent in normal flow.
Avoid confusion
Use padding, border, flow-root or gap-based layout when collapse is not desired.