Box Model
The CSS box model describes how every element is a rectangular box made of four layers — content , padding , border , and margin — and understanding how they stack and size is the key to controlling spacing and layout.
Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
What You'll Learn
💡 Think of It Like This
Imagine a picture frame: The picture itself is the content . The matting around the picture is the padding . The frame itself is the border . And the space between the frame and the wall (or other frames) is the margin .
Box Layer
Picture Frame Analogy
CSS Property
Content
The picture itself
width / height
Padding
The matting around the picture
padding
Border
The frame itself
border
Margin
Space between frames on the wall
margin
The CSS Box Model
Every HTML element is a rectangular box. The box model describes how the browser calculates the total size of each element.
box-sizing: border-box vs content-box
By default, width only sets the content width. Padding and border are added on top , making the element bigger than you expect. box-sizing: border-box fixes this by including padding and border inside the width.
The display Property
The display property controls how an element flows in the page. The three most common values are block , inline , and inline-block .
Value
Takes Full Width?
Width/Height Work?
Examples
block
Yes — new line
✅ Yes
div, p, h1–h6, section
inline
No — same line
❌ No
span, a, strong, em
inline-block
img, button, input
⚠️ Common Mistakes
- Forgetting box-sizing: border-box — Without it, padding and border make elements larger than the width you set. Always add *, *::before, *::after { box-sizing: border-box; } to your CSS.
- Setting width/height on inline elements — span and a ignore width and height. Use display: inline-block or display: block first.
- Collapsing margins — When two vertical margins touch, they collapse into one (the larger value wins). This doesn't happen with padding.
- Using margin for internal spacing — Use padding for space inside an element; use margin for space between elements.
🎉 Lesson Complete
You now understand the CSS box model — the foundation of every layout on the web. Key takeaways:
- ✅ Every element has content → padding → border → margin
- ✅ Use box-sizing: border-box for predictable sizing
- ✅ block = full width + new line; inline = flows in text; inline-block = best of both
- ✅ Padding = space inside; Margin = space outside
Practice quiz
What are the four layers of the CSS box model, from inside to outside?
- margin, border, padding, content
- content, padding, border, margin
- content, margin, border, padding
- padding, content, margin, border
Answer: content, padding, border, margin. From the inside out: content, then padding, then border, then margin.
Which box layer is the space INSIDE the border, between content and border?
- margin
- padding
- border
- content
Answer: padding. Padding is the space inside the border surrounding the content; margin is the space outside the border.
Which box layer is the space OUTSIDE the border, between this element and others?
- padding
- content
- margin
- border
Answer: margin. Margin is the space outside the border separating the element from its neighbours.
With the default box-sizing: content-box, what does the width property set?
- The content width only — padding and border are added on top
- The total rendered width including padding and border
- Only the border width
- The margin width
Answer: The content width only — padding and border are added on top. In content-box, width sets just the content; padding and border are added outside it, making the element larger than the width value.
An element has width: 300px, padding: 20px, and a 5px border, with the default content-box. What is its total rendered width?
- 300px
- 325px
- 350px
- 340px
Answer: 350px. 300 + 40 (20px padding each side) + 10 (5px border each side) = 350px in content-box.
What does box-sizing: border-box do?
- Adds padding and border outside the width
- Includes padding and border inside the declared width
- Removes the border entirely
- Doubles the element's width
Answer: Includes padding and border inside the declared width. border-box includes padding and border inside the width, so a width: 300px element renders at exactly 300px — far more predictable.
How does a display: block element behave?
- Sits on the same line as other elements and ignores width/height
- Takes the full width available and starts on a new line
- Flows inside text and respects width/height
- Is removed from the layout
Answer: Takes the full width available and starts on a new line. Block elements (div, p, h1–h6, section) take full width and stack vertically on new lines.
What happens when you set width and height on a display: inline element like a span?
- They apply normally
- They are ignored
- They double in size
- The element becomes a block
Answer: They are ignored. Inline elements (span, a, strong, em) ignore width and height and flow within text.
Which display value sits elements side by side BUT still respects width and height?
- block
- inline
- inline-block
- none
Answer: inline-block. inline-block flows on the same line like inline but honours width and height like block — the best of both.
What is margin collapsing?
- Two adjacent vertical margins combine into one (the larger value)
- Padding turning into margin
- Borders overlapping
- Margins being ignored on inline elements
Answer: Two adjacent vertical margins combine into one (the larger value). When two vertical margins touch they collapse into a single margin equal to the larger value. Padding does not collapse.
Continue this course
- Previous: CSS Styling & Colors
- Next: CSS Layouts & Box Model