Loading...

CSS Box Model

You already know borders, padding, margin, and width. Now put them on one map. The CSS box model says every element is a set of nested layers: content in the middle, then padding, then border, then margin on the outside.

The four layers

Read the box from the inside out.

📊 Box model layers

Layer Where it sits Everyday job
Content Center Text, images, and children live here; width / height usually size this
Padding Between content and border Inner cushion; background usually fills it
Border Around the padding The drawn edge of the box
Margin Outside the border Outer gap that separates this box from neighbors

Start with content size only

A bare width without padding or border keeps the story simple.

Content width only

css
CSS Code 
.box-content {
width: 200px;
background-color: #ccfbf1;
}

Add padding — the cushion grows the painted area

Padding sits inside the border. Under the default content-box model, padding is added outside the content width, so the painted box gets wider.

Content plus padding

css
CSS Code 
.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* Content stays 200px wide; padding adds 20px on each side */

Add a border — another ring

The border wraps the padding. With default sizing, border thickness also adds to the total outer size of the border box.

Content, padding, and border

css
CSS Code 
.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}

Put all four layers together

Margin does not paint the background; it only pushes neighbors away.

Full box model recipe

css
CSS Code 
.card {
width: 200px;          /* content */
padding: 16px;         /* inner cushion */
border: 2px solid #134e4a; /* edge */
margin: 24px;          /* outer gap */
background-color: #ecfdf5;
}

Same width, different total size

Two boxes can share width: 200px yet feel very different once padding and border enter the recipe.

Compare bare vs padded

css
CSS Code 
.bare {
width: 200px;
background-color: #fef3c7;
}

.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Both claim width 200px; .padded occupies more horizontal space */

Default rule to remember

By default (box-sizing: content-box), width and height describe the content box. Padding and border usually make the final visible box larger. A later lesson covers box-sizing: border-box, which changes that math.

Try it yourself

  1. Build .box-content with only width: 200px and a background.
  2. Copy it, add padding: 20px, and notice the painted area grow.
  3. Add a thick border and watch the total size again.
  4. Add margin: 24px and confirm neighbors move away without filling that gap with the background.
  5. Place .bare and .padded side by side — same declared width, different footprint.

Common mistakes

  • Thinking margin is part of the background fill (it is outside and usually transparent)
  • Declaring width: 200px and expecting the border box to stay exactly 200px after heavy padding (not with content-box)
  • Mixing up the layer order (content → padding → border → margin)
  • Confusing outline with border (outline is a different tool)
  • Jumping to border-box habits before understanding the default model

Summary

  • Every element has content, padding, border, and margin layers
  • Padding is inside the border; margin is outside
  • Default width/height size the content box
  • Padding and border often increase the total visible size
  • Margin creates outer separation without painting the fill
  • box-sizing (next specialty lesson) can change the width math

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial