📘 Lesson · Lesson 15
The Box Model
Box Model
What the Box Model Is
Every single element on a web page is a rectangular box — even circles and text are boxes underneath. The "box model" is the set of layers that make up that box: the content, the space around it inside, a border, and space outside. Understanding this is the single most important concept in CSS layout — nearly every spacing and sizing question comes back to the box model. Master it here and everything about layout gets easier.
The Four Layers — from inside out
┌─────────────────────────────────────┐
│ MARGIN (outside space) │
│ ┌─────────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING (inside) │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ │ (text/image)│ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘| Layer | What it is |
|---|---|
| Content | The actual text, image or content itself |
| Padding | Space INSIDE the border, around the content |
| Border | The line around the padding |
| Margin | Space OUTSIDE the border, pushing other elements away |
The Gift Box Analogy — remember this forever
Picture wrapping a gift:
• Content = the present itself (the actual thing).
• Padding = the bubble wrap around the present, inside the box — cushioning between the gift and the box walls.
• Border = the cardboard box itself — the visible edge.
• Margin = the empty space you leave between this box and other boxes on the shelf, so they don't touch.
This mental image instantly clarifies the #1 beginner confusion: padding is inside (pushes the border away from content), margin is outside (pushes other elements away). Padding is cushioning within; margin is distance between.
• Content = the present itself (the actual thing).
• Padding = the bubble wrap around the present, inside the box — cushioning between the gift and the box walls.
• Border = the cardboard box itself — the visible edge.
• Margin = the empty space you leave between this box and other boxes on the shelf, so they don't touch.
This mental image instantly clarifies the #1 beginner confusion: padding is inside (pushes the border away from content), margin is outside (pushes other elements away). Padding is cushioning within; margin is distance between.
How Size Adds Up — the classic gotcha
.box {
width: 200px;
padding: 20px;
border: 5px solid navy;
}
/* How wide is the box ACTUALLY on screen? */
200 (width) + 20 + 20 (padding) + 5 + 5 (border) = 250px !The surprise every beginner hits: by default,
width sets only the CONTENT width — padding and border are ADDED on top. So a "200px" box with padding and border actually takes 250px on screen. This trips up layouts constantly ("why is my box too wide?"). There's a one-line fix called box-sizing: border-box that makes width include padding and border — it gets its own chapter soon because it's that important. For now, just know: default width = content only, extras add on.See It Yourself — DevTools
Right-click any element → Inspect → look at the
"Computed" tab. You'll see the exact box model diagram
with real numbers for that element's content, padding,
border and margin - colour-coded.Every browser's DevTools shows a live, colour-coded box model diagram for any element you inspect (content in blue, padding green, border yellow, margin orange). This is the fastest way to understand — and debug — spacing. When an element has mysterious extra space, inspect it and the box model diagram reveals exactly which layer is responsible. Make this a habit; it turns invisible spacing into something you can see.
Exam Corner
Q: What are the four parts of the box model? Content, padding, border, margin (inside to outside).
Q: Difference between padding and margin? Padding is space inside the border (around content); margin is space outside the border (between elements).
Q: By default, does width include padding and border? No — width is content only; padding and border add on top.
Q: A 200px box with 20px padding and 5px border is how wide? 250px (200 + 20+20 + 5+5).
Q: Which property makes width include padding and border? box-sizing: border-box.
Q: Difference between padding and margin? Padding is space inside the border (around content); margin is space outside the border (between elements).
Q: By default, does width include padding and border? No — width is content only; padding and border add on top.
Q: A 200px box with 20px padding and 5px border is how wide? 250px (200 + 20+20 + 5+5).
Q: Which property makes width include padding and border? box-sizing: border-box.
Box Model क्या है
Web page का हर एक element एक आयताकार box है — circles और text भी नीचे से boxes हैं. "box model" उन layers का समूह है जो वह box बनाती हैं: content, उसके अंदर चारों ओर space, एक border, और बाहर space. यह समझना CSS layout का सबसे ज़रूरी concept है — लगभग हर spacing और sizing सवाल box model पर लौटता है. इसे यहां master कीजिए और layout की हर बात आसान हो जाती है.
चार Layers — अंदर से बाहर
┌─────────────────────────────────────┐
│ MARGIN (bahar ki space) │
│ ┌─────────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING (andar) │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ │ (text/image)│ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘| Layer | क्या है |
|---|---|
| Content | असली text, image या content खुद |
| Padding | Border के ANDAR, content के चारों ओर space |
| Border | Padding के चारों ओर की line |
| Margin | Border के BAHAR space, दूसरे elements को दूर धकेलता |
Gift Box Analogy — हमेशा याद रखिए
Gift wrap करना कल्पना कीजिए:
• Content = तोहफा खुद (असली चीज़).
• Padding = तोहफे के चारों ओर bubble wrap, box के अंदर — gift और box की दीवारों के बीच cushioning.
• Border = cardboard box खुद — दिखने वाला किनारा.
• Margin = इस box और shelf पर दूसरे boxes के बीच छोड़ी खाली जगह, ताकि वे न छुएं.
यह mental image तुरंत #1 beginner confusion साफ करती है: padding अंदर है (border को content से दूर धकेलता), margin बाहर है (दूसरे elements को दूर धकेलता). Padding अंदर की cushioning; margin बीच की दूरी.
• Content = तोहफा खुद (असली चीज़).
• Padding = तोहफे के चारों ओर bubble wrap, box के अंदर — gift और box की दीवारों के बीच cushioning.
• Border = cardboard box खुद — दिखने वाला किनारा.
• Margin = इस box और shelf पर दूसरे boxes के बीच छोड़ी खाली जगह, ताकि वे न छुएं.
यह mental image तुरंत #1 beginner confusion साफ करती है: padding अंदर है (border को content से दूर धकेलता), margin बाहर है (दूसरे elements को दूर धकेलता). Padding अंदर की cushioning; margin बीच की दूरी.
Size कैसे जुड़ता है — classic gotcha
.box {
width: 200px;
padding: 20px;
border: 5px solid navy;
}
/* Box screen par ASAL me kitna chauda hai? */
200 (width) + 20 + 20 (padding) + 5 + 5 (border) = 250px !हर beginner को लगने वाला surprise: default रूप से
width सिर्फ CONTENT width set करता है — padding और border ऊपर से JODE जाते हैं. तो padding और border वाला "200px" box असल में screen पर 250px लेता है. यह layouts को लगातार उलझाता है ("मेरा box बहुत चौड़ा क्यों?"). एक one-line fix है box-sizing: border-box जो width में padding और border शामिल करता है — इसे जल्द अपना chapter मिलता है क्योंकि यह इतना ज़रूरी है. अभी बस जानिए: default width = सिर्फ content, extras ऊपर से जुड़ते हैं.खुद देखिए — DevTools
Kisi bhi element par right-click → Inspect → "Computed"
tab dekhiye. Aapko us element ke content, padding,
border aur margin ke asli numbers ke saath exact box
model diagram dikhega - colour-coded.हर browser का DevTools किसी भी inspect किए element के लिए live, colour-coded box model diagram दिखाता है (content नीला, padding हरा, border पीला, margin नारंगी). यह समझने — और debug करने — का सबसे तेज़ तरीका है. जब element में रहस्यमय extra space हो, उसे inspect कीजिए और box model diagram ठीक बताता है कौन-सी layer ज़िम्मेदार है. इसे आदत बनाइए; यह अदृश्य spacing को दिखने वाली चीज़ बना देता है.
Exam Corner
Q: Box model के चार हिस्से क्या हैं? Content, padding, border, margin (अंदर से बाहर).
Q: Padding और margin में अंतर? Padding border के अंदर space (content के चारों ओर); margin border के बाहर space (elements के बीच).
Q: Default रूप से क्या width में padding और border शामिल है? नहीं — width सिर्फ content; padding और border ऊपर से जुड़ते हैं.
Q: 20px padding और 5px border वाला 200px box कितना चौड़ा? 250px (200 + 20+20 + 5+5).
Q: कौन-सी property width में padding और border शामिल करती है? box-sizing: border-box.
Q: Padding और margin में अंतर? Padding border के अंदर space (content के चारों ओर); margin border के बाहर space (elements के बीच).
Q: Default रूप से क्या width में padding और border शामिल है? नहीं — width सिर्फ content; padding और border ऊपर से जुड़ते हैं.
Q: 20px padding और 5px border वाला 200px box कितना चौड़ा? 250px (200 + 20+20 + 5+5).
Q: कौन-सी property width में padding और border शामिल करती है? box-sizing: border-box.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.