📘 Lesson · Lesson 21

box-sizing: border-box

The Problem It Solves — the box model's biggest pain

Remember the box model gotcha? A width: 200px box with padding: 20px and a 5px border is actually 250px wide on screen, because padding and border ADD to the width. This wrecks layouts constantly: you set two boxes to width: 50% side by side, add padding, and suddenly they don't fit — they wrap to separate lines because 50% + padding is more than 50%. box-sizing is the property that fixes this maddening behaviour once and for all. This is one of the most valuable chapters in the whole course.

content-box — the frustrating default

.box {
    box-sizing: content-box;   /* the DEFAULT */
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
/* Real width = 200 + 40 + 10 = 250px */

width: 200px → actual box on screen: 250px wide (width means CONTENT only; extras add on top)

By default, every element uses content-box: the width you set applies ONLY to the content, with padding and border added ON TOP. So the number you write is never the actual size on screen — you have to do mental math to account for padding and border. This is unintuitive and error-prone, which is exactly why the fix below exists.

border-box — the intuitive fix

.box {
    box-sizing: border-box;    /* THE FIX */
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
/* Real width = 200px. EXACTLY. Padding & border fit INSIDE. */

width: 200px → actual box on screen: 200px wide (padding & border squeeze INSIDE the 200px)

border-box makes width mean what you'd expect: the TOTAL width including padding and border. Set width: 200px and the box is exactly 200px on screen — padding and border fit inside that number instead of adding to it. No more mental math, no more mysterious overflow. Two boxes at width: 50% with padding now actually fit side by side. This single property makes CSS sizing behave the intuitive way it always should have.

Side by Side — the difference in one view

	content-box (default)	border-box
width means	Content only	Content + padding + border
width: 200px + 20px padding	= 240px on screen	= 200px on screen
Mental math needed?	Yes 😫	No 😊
50% + 50% side by side?	Breaks with padding	Works perfectly

The difference is simply WHERE padding and border go: content-box adds them outside your width; border-box fits them inside. For layout work, border-box is almost always what you want — which is why professionals apply it globally to every element (next).

The Universal Reset — put this in every project

* {
    box-sizing: border-box;
}

/* Or the more thorough version many developers use: */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

This is one of the first things professionals write in ANY stylesheet. Using the universal selector * (from the selectors chapter), it applies border-box to every element on the page, so ALL your sizing becomes intuitive from the start. Many pair it with resetting default margin/padding to zero, giving a clean, predictable foundation. Add this reset at the top of your CSS and you'll avoid countless sizing headaches. Genuinely, * { box-sizing: border-box; } is a line worth memorising and using in every single project.

Exam Corner

Q: What's the default box-sizing value? content-box (width = content only; padding and border add on top).

Q: What does border-box do? Makes width include padding and border, so the declared width is the actual on-screen width.

Q: A 200px box with 20px padding: width on screen with border-box? Exactly 200px (padding fits inside).

Q: Why do developers use border-box? It makes sizing intuitive and stops padding/border from causing overflow.

Q: Write the universal border-box reset. * { box-sizing: border-box; }

यह किस समस्या को हल करता है — box model का सबसे बड़ा दर्द

Box model का gotcha याद है? padding: 20px और 5px border वाला width: 200px box असल में screen पर 250px चौड़ा है, क्योंकि padding और border width में JODTE हैं. यह layouts को लगातार बिगाड़ता है: आप दो boxes को side by side width: 50% set करते हैं, padding जोड़ते हैं, और अचानक वे fit नहीं होते — अलग lines में wrap हो जाते हैं क्योंकि 50% + padding 50% से ज़्यादा है. box-sizing वह property है जो इस पागल करने वाले व्यवहार को हमेशा के लिए fix करती है. यह पूरे course के सबसे मूल्यवान chapters में से एक है.

content-box — परेशान करने वाला default

.box {
    box-sizing: content-box;   /* DEFAULT */
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
/* Asli width = 200 + 40 + 10 = 250px */

width: 200px → screen par asli box: 250px chauda (width matlab sirf CONTENT; extras upar se jud़te)

Default रूप से हर element content-box use करता है: आपकी set की width सिर्फ content पर लगती है, padding और border UPAR से जुड़ते. तो आप जो number लिखते हैं वह कभी screen पर असली size नहीं — padding और border का हिसाब रखने को mental math करना पड़ता है. यह unintuitive और error-prone है, ठीक इसीलिए नीचे वाला fix है.

border-box — intuitive fix

.box {
    box-sizing: border-box;    /* FIX */
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
/* Asli width = 200px. THEEK. Padding aur border ANDAR fit. */

width: 200px → screen par asli box: 200px chauda (padding aur border 200px ke ANDAR simat़te)

border-box width को वही बनाता है जो आप उम्मीद करें: padding और border समेत TOTAL width. width: 200px set कीजिए और box screen पर ठीक 200px है — padding और border उस number में जुड़ने के बजाय उसके अंदर fit होते. कोई mental math नहीं, कोई रहस्यमय overflow नहीं. padding वाले width: 50% के दो boxes अब असल में side by side fit होते हैं. यह एक property CSS sizing को उस intuitive तरीके से व्यवहार कराती है जैसा हमेशा होना चाहिए था.

आमने-सामने — एक view में फर्क

	content-box (default)	border-box
width मतलब	सिर्फ content	Content + padding + border
width: 200px + 20px padding	= screen पर 240px	= screen पर 200px
Mental math चाहिए?	हां 😫	नहीं 😊
50% + 50% side by side?	padding से टूटता	Perfectly चलता

फर्क बस यह है padding और border KAHAN जाते हैं: content-box उन्हें आपकी width के बाहर जोड़ता; border-box उन्हें अंदर fit करता. Layout काम के लिए border-box लगभग हमेशा वही है जो आप चाहते हैं — इसीलिए professionals इसे globally हर element पर लगाते हैं (अगला).

Universal Reset — हर project में यह डालिए

* {
    box-sizing: border-box;
}

/* Ya jyada thorough version jo kai developers use karte: */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

यह पहली चीज़ों में से है जो professionals KISI भी stylesheet में लिखते हैं. Universal selector * (selectors chapter से) use करते हुए, यह page के हर element पर border-box लगाता है, तो आपकी SAARI sizing शुरू से intuitive हो जाती है. कई इसके साथ default margin/padding शून्य reset करते हैं, साफ, predictable नींव देते. अपनी CSS के ऊपर यह reset जोड़िए और अनगिनत sizing सिरदर्द से बचिए. सच में, * { box-sizing: border-box; } हर एक project में याद रखने और use करने लायक line है.

Exam Corner

Q: Default box-sizing value क्या है? content-box (width = सिर्फ content; padding और border ऊपर से जुड़ते).

Q: border-box क्या करता है? width में padding और border शामिल करता है, तो declared width ही असली screen width है.

Q: 20px padding वाला 200px box: border-box के साथ screen पर width? ठीक 200px (padding अंदर fit).

Q: Developers border-box क्यों use करते हैं? यह sizing intuitive बनाता है और padding/border को overflow पैदा करने से रोकता है.

Q: Universal border-box reset लिखिए. * { box-sizing: border-box; }

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.