Loading...

CSS Box Sizing

You already know that padding and border can make a box larger than its declared width. box-sizing picks the rule for that math: does width mean “content only,” or “content plus padding plus border”?

Two models at a glance

📊 content-box vs border-box

Model What width / height cover Everyday effect
content-box (default) Content only Padding and border add outside the declared size
border-box Content + padding + border Declared size is the outer border edge; content shrinks to fit
Margin Never included in either model Outer gap stays separate from box-sizing

Default: content-box

With the default, width: 200px sizes the content. Add padding and border, and the painted box grows.

Content-box (default)

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Content 200px + padding + border → wider total */

Switch to border-box

With border-box, the same width: 200px includes padding and border. The outer edge stays closer to 200px; the content area gets smaller.

Border-box sizing

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* Outer border box aims for 200px; content shrinks */

Same numbers, different footprint

Put both models side by side with identical width, padding, and border.

Compare the two models

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Same declarations; .contenty occupies more horizontal space */

Why teams like border-box

When a card must fill a column exactly — say width: 100% with padding — border-box keeps the card from overflowing its parent.

Column-friendly card

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

A calm global habit

Many stylesheets set border-box once for everything, so everyday width math stays predictable. Margin is still outside.

Universal border-box habit

css
CSS Code 
*,
*::before,
*::after {
box-sizing: border-box;
}

Try it yourself

  1. Build .panel-content with width: 200px, padding, and border under content-box.
  2. Duplicate it as .panel-border with box-sizing: border-box — watch the outer size shrink toward 200px.
  3. Place .contenty and .borderish side by side with the same numbers.
  4. Make a width: 100% card with padding; toggle box-sizing and see which one overflows.
  5. Try the universal * habit in a small demo page.

Common mistakes

  • Thinking border-box includes margin (it does not)
  • Forgetting the default is content-box until you change it
  • Expecting outline to follow box-sizing (outline stays outside and still takes no layout space)
  • Declaring width: 100% with heavy padding under content-box and wondering why the box spills
  • Mixing percentages without knowing which sizing model is active

Summary

  • Default box-sizing: content-box sizes content; padding and border add on
  • border-box keeps padding and border inside the declared width/height
  • Margin is outside both models
  • Border-box often makes column widths and width: 100% cards easier
  • A universal border-box reset is a common, calm habit

🧠 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