Content
The actual text, image or child layout area. Width and height normally apply here.
Platform under construction
Box Model
The CSS box model explains how every element takes up space: content, padding, border and margin. If you understand this, layout stops feeling random.
.card {
padding: 2rem;
border: 1px solid #263247;
margin-block: 2rem;
}
Box Model
Every visible layout problem starts with a box.
CSS draws each element as a rectangular box. The content box holds text, images or child elements. Padding creates inner breathing room. Border draws the visible edge. Margin pushes other boxes away.
Beginners often see one rectangle on screen and assume one value controls it. In reality, several layers work together. That is why an element can look too wide, too tall or too far away even when the width value seems correct.
The box model is not just theory. It is the foundation behind cards, buttons, forms, dashboards, responsive sections and almost every spacing decision in professional interface work.
Padding
Inner space between the content and the border. It makes components feel comfortable.
Border
The visible edge around padding and content. It can affect total size.
Margin
Outer space between this box and surrounding boxes. It belongs outside the border.
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.
Margin
Outside the element. It separates the element from neighbors.
Border
The visible edge that wraps padding and content.
Padding
Internal space that keeps content from touching the edge.
Content
The usable area where text, media and children live.
Examples
Professional spacing is deliberate, not decorative guesswork.
Readable box model
.card {
max-width: 36rem;
padding: 1.5rem;
border: 1px solid #263247;
margin-block: 2rem;
}
Spacing by accident
.card {
width: 600px;
height: 280px;
padding: 60px 12px 8px 43px;
margin-left: 97px;
}
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.
Separate inside and outside space
Use padding for space inside a component and margin for space around it.
Inspect the computed box
DevTools shows content, padding, border and margin separately. Use that view before guessing.
Avoid fixed heights first
Most content should decide height naturally. Fixed height often creates overflow.
Use spacing systems
Repeated spacing values make layouts feel intentional instead of improvised.
Think in components
Cards, buttons and forms need inner spacing; page sections need outer rhythm.
Check real content
Long labels and translated text expose weak box model decisions quickly.
Production thinking
The box model is where visual polish becomes maintainable CSS.
Why does this matter?
The box model turns visual spacing into a predictable system. Without it, every card, button and section becomes a pile of magic numbers.
Accessibility
Good box model decisions improve readability, touch targets and focus visibility. Tight boxes make interfaces harder to use.
Production note
Production CSS should make spacing decisions visible in code. Use clear padding, margin and sizing rules instead of one-off pixel nudges.
SEO note
A clean layout helps users stay on the page. Readable, stable content supports engagement and avoids frustrating layout shifts.
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 padding from 32px to 12px and describe what feels worse.
- Increase border width and notice whether the component grows.
- Change margin and explain why the inside of the card does not change.
Practice assignment
Do this before moving to the next lesson.
- Create one card with content, padding, border and margin.
- Inspect the card in DevTools and identify all four layers.
- Write down which value controls inner comfort and which controls outer rhythm.
Try it yourself
Build a comfortable card with the box model
Self-check
Before you continue, prove that you understand Box Model.
Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.
- Can you name the four layers of the box model in order?
- Can you explain the difference between padding and margin?
- Can you inspect an element and find which layer creates unexpected space?
- Can you avoid fixed heights when content should flow naturally?
- Can you design a component with intentional inner and outer spacing?
Senior audit upgrade
The box model is easier with a visible mental picture.
Every element has content, padding, border and margin. Spacing bugs often come from confusing internal space with external space.
Content
The actual text, image or child layout area.
Padding and border
Padding creates internal breathing room. Border is the visible edge around it.
Margin
Margin pushes other boxes away and can collapse vertically in normal flow.
margin
border
padding
content