CSS · Lesson 4 of 7
The box model
Content, padding, border, margin and box-sizing.
Every element is a box: content → padding (inside space) → border → margin (outside space).
By default width sets only the content width, so padding and border make the box bigger. Most sites add:
*, *::before, *::after { box-sizing: border-box; }Now width includes padding and border, which makes layouts predictable.
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- Padding is inside the border, margin outside.
- box-sizing: border-box makes width include padding.
- Vertical margins between blocks can collapse.
Quick check
Which property adds space inside an element's border?
Padding is the space between content and border; margin is outside the border.
Practice task
Create a card with 16px padding, a 1px border, 12px rounded corners and 24px space below it, using box-sizing: border-box.
Interview corner
Explain the CSS box model.
Every element is a box: content, then padding, then border, then margin. box-sizing decides whether width includes padding and border.
What is margin collapsing?
Vertical margins of adjacent block elements combine into the larger of the two instead of adding up.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.