पाठ 11, कुल 30 में

CSS बॉक्स मॉडल

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

हर HTML element एक बॉक्स है। जब browser कोई paragraph, heading या तस्वीर बनाता है, तो वह चार परतों वाला एक आयताकार बॉक्स बनाता है। इसे box model कहते हैं, और एक बार यह समझ आ जाए तो आधी CSS अचानक समझ में आने लगती है।

Diagram — देखें, यह सब कैसे जुड़ता है

चार परतें

अंदर से बाहर, परतें ये हैं:

Content — text या तस्वीर खुद। इसका size width और height से तय होता है।
Padding — border के अंदर, content के चारों ओर की जगह। Background colour इसे भर देता है।
Border — padding के चारों ओर एक रेखा। इसकी width, style और colour होती है।
Margin — border के बाहर की खाली जगह, इस बॉक्स और पड़ोसी बॉक्सों के बीच। यह हमेशा transparent होती है।

बॉक्स असल में कितना चौड़ा होता है?

डिफ़ॉल्ट रूप से, width सिर्फ content को तय करती है। width: 200px; padding: 20px; border: 5px solid black; वाला बॉक्स पेज पर असल में 250px चौड़ा होता है: 200 + 20 + 20 + 5 + 5। यह हर beginner को चौंकाता है — जो बॉक्स आपने माँगा था, वह बॉक्स आपको मिला नहीं।

box-sizing — border-box से गिनती बदलें

box-sizing: border-box; गणित बदल देता है: अब width में padding और border भी शामिल हो जाते हैं। वही बॉक्स ठीक 200px चौड़ा होता है, और content अंदर सिमट जाता है। ज़्यादातर developers हर project की शुरुआत में इसे हर element पर लगा देते हैं:

* {
  box-sizing: border-box;
}

* selector का मतलब है "हर element"। इस एक rule से widths वैसे व्यवहार करने लगती हैं जैसी आप उम्मीद करते हैं।

Syntax — box model काम में

.card {
  width: 200px;
  padding: 20px;
  border: 5px solid #1e3a5f;
  margin: 10px;
  box-sizing: border-box;
}

Note: Margins खास होते हैं: जब दो vertical margins मिलते हैं, तो वे जुड़ते नहीं — बड़ा वाला जीतता है। margin: 20px; वाले दो बॉक्सों के बीच 20px का gap होता है, 40px का नहीं। इसे margin collapsing कहते हैं।

Tip: Chrome में किसी भी element पर right-click करें और Inspect चुनें। Styles panel box model को चारों परतों और उनके ठीक pixel sizes के साथ दिखाता है — यह समझने का सबसे तेज़ तरीका है कि बॉक्स इतना बड़ा क्यों है।

आम गलतियाँ

दो width: 50%; वाले बॉक्सों को साथ-साथ रखना और padding जोड़ देना — डिफ़ॉल्ट content-box के साथ वे 50% से चौड़े हो जाते हैं और दूसरा बॉक्स अगली लाइन पर गिर जाता है।
width: 100% तय करना और फिर border जोड़ देना — border बॉक्स को उसके parent से चौड़ा धकेल देता है। box-sizing: border-box इस्तेमाल करें।
यह उम्मीद करना कि vertical margins जुड़ जाएँगे — वे collapse होते हैं, और सिर्फ बड़ा वाला गिना जाता है।
यह भूल जाना कि height भी width जैसा ही व्यवहार करता है — padding और border ऊपर से जुड़ जाते हैं, जब तक border-box न लगाया हो।

याद रखें

हर element एक बॉक्स है: content, padding, border, margin — अंदर से बाहर।
डिफ़ॉल्ट रूप से, width और height सिर्फ content को मापते हैं।
box-sizing: border-box; width में padding और border को शामिल कर देता है।
Margin border के बाहर होता है और हमेशा transparent रहता है; padding अंदर होता है और background दिखाता है।
Vertical margins collapse होते हैं — बड़ा वाला जीतता है।
तरकीब: HTML = ढाँचा, CSS = सजावट, JavaScript = हरकत।

उदाहरण समझिए

.box-a { width: 200px; padding: 20px; border: 5px solid #1e3a5f; } — डिफ़ॉल्ट content-box के साथ, यह बॉक्स पेज पर 250px चौड़ा होता है: 200 + 20 + 20 + 5 + 5।
.box-b { width: 200px; padding: 20px; border: 5px solid #16a34a; box-sizing: border-box; } — वही नंबर, लेकिन border-box padding और border को 200px के अंदर समेट लेता है, इसलिए बॉक्स ठीक 200px चौड़ा होता है।
दोनों बॉक्सों पर margin: 10px; — दोनों बॉक्सों के बीच की खाली जगह, उनके borders के बाहर।
.box-a पर background: #dbeafe; — हल्का नीला रंग content और padding को भरता है, पर margin को नहीं। इसी से दिखता है कि padding कहाँ खत्म होता है और margin कहाँ शुरू होता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Box Model - Two Boxes</title>
<style>
.box-a { width: 200px; padding: 20px; border: 5px solid #1e3a5f; background: #dbeafe; margin: 10px; }
.box-b { width: 200px; padding: 20px; border: 5px solid #16a34a; background: #dcfce7; margin: 10px; box-sizing: border-box; }
</style>
</head>
<body>

<div class="box-a">Box A - content-box (default). I am 250px wide.</div>
<div class="box-b">Box B - border-box. I am exactly 200px wide.</div>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।