CSS टॉपिक्स

🎨 CSS Design✨पाठ 7 / 16

CSS Box Model

Content, Padding, Border और Margin का सच। समझें box-sizing: border-box कैसे लेआउट को ओवरफ्लो होने से बचाता है।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.4 परतें (Concentric Layers): Content, Padding, Border, और Margin — ब्राउज़र इन्हें कैसे रेंडर करता है।

2.`box-sizing` की क्रांति: `content-box` लेआउट क्यों बिगाड़ता है और पूरी दुनिया `border-box` क्यों इस्तेमाल करती है।

3.Margin Collapse का रहस्य: भाई-बहनों का मिलन, पैरेंट-चाइल्ड लीकेज, और BFC द्वारा इसका समाधान।

4.Negative Margins और ऑटो-सेंटरिंग: ओवरलैपिंग कार्ड्स, बैनर ब्रेकआउट्स, और `margin: 0 auto`।

5.मॉडर्न लॉजिकल प्रॉपर्टीज: `padding-inline` और `margin-block` से फ्यूचर-प्रूफ कोड लिखना।

6.सीनियर डेवलपर डिबगिंग: ब्राउज़र DevTools बॉक्स मॉडल विज़ुअलाइज़र और `outline` ट्रिक का उपयोग।

📦 बॉक्स मॉडल की 4 संकेंद्रित परतें (Concentric Layers)

HTML में मौजूद हर एक दृश्य तत्व — चाहे वह `<div>` हो, `<button>`, `<h1>`, या `<img>` — ब्राउज़र के अंदर 4 परतों से बना एक आयताकार (rectangular) बॉक्स होता है:

MARGIN (बाहरी स्पेस — हमेशा पूरी तरह पारदर्शी)क्लिक स्वीकार नहीं करता

BORDER (ठोस बाहरी दीवार या सीमा)कलर, स्टाइल व मोटाई होती है

PADDING (अंदरूनी कुशन या हवा का अंतर)बैकग्राउंड कलर इसी में दिखता है

CONTENT (टेक्स्ट, तस्वीर, वीडियो या अंदरूनी चाइल्ड एलिमेंट्स)

width × height

1. Margin (मार्जिन)बाहरी

बॉर्डर के बाहर की खाली जगह। दो अलग-अलग बॉक्सेज को आपस में टकराने से रोकती है। यह पूरी तरह पारदर्शी (transparent) होती है।

2. Border (बॉर्डर)दीवार

कंटेंट और पैडिंग को घेरने वाली बाहरी रेखा। इसे `border-width`, `border-style`, और `border-color` से सजाया जाता है।

3. Padding (पैडिंग)अंदरूनी

कंटेंट और बॉर्डर के बीच की जगह। बटन्स के लिए यह क्लिक करने योग्य क्षेत्र (clickable hit area) को बड़ा करने में मदद करती है।

4. Content (कंटेंट)मूल सामग्री

असली सामग्री — जैसे हेडिंग, पैराग्राफ या इमेज। इसका साइज `width`, `height`, `min-width`, और `max-width` से तय होता है।

🍱 टिफिन बॉक्स का उदाहरण: साइजिंग मोड्स को समझना

CSS बॉक्स मॉडल को आसानी से समझने के लिए अपने स्कूल या ऑफिस के स्टील टिफिन बॉक्स की कल्पना करें:

Content: टिफिन के अंदर रखी गरमा-गरम रोटी और पनीर की सब्जी।
Padding: टिफिन के ढक्कन और खाने के बीच की खाली जगह जो ग्रेवी को ढक्कन से चिपकने से बचाती है। जब टिफिन के अंदर कोई रंग या कोटिंग होती है, तो पैडिंग में भी वही रंग दिखता है।
Border: टिफिन की स्टील की मजबूत दीवार और क्लिप।
Margin: टेबल पर आपके टिफिन और आपके दोस्त के टिफिन के बीच की दूरी, ताकि खाते वक्त आपकी कोहनी उनसे न टकराए।

बैग का भयानक हादसा (content-box बनाम border-box):

मान लीजिए आपने दुकान से एक टिफिन बैग खरीदा जिसकी जेब ठीक 200mm चौड़ी है। आपने 200mm का टिफिन खरीदा। लेकिन टिफिन बनाने वाली कंपनी कहती है: “अरे! हमारा 200mm तो सिर्फ अंदरूनी खाने की जगह है! जब आप 20mm की सीलिंग (padding) और 5mm की स्टील दीवार (border) जोड़ेंगे, तो टिफिन असल में 250mm का हो जाएगा!”

नतीजा? टिफिन बैग की जेब में फिट नहीं होगा और चेन फट जाएगी! यही पुराना `box-sizing: content-box` (CSS का डिफ़ॉल्ट व्यवहार) करता है।

वहीं `box-sizing: border-box` का नियम यह है कि अगर टिफिन 200mm का है, तो उसकी बाहरी स्टील दीवार ठीक 200mm ही रहेगी। अंदर की पैडिंग और खाना खुद उसी 200mm में समाहित हो जाएंगे।

💻 लाइव बॉक्स मॉडल प्लेग्राउंड (Live Playground)

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Box Model Demo</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, sans-serif;
      background: #f1f5f9;
      padding: 30px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

/* Container to show parent boundary */
    .shelf {
      width: 340px;
      background: #ffffff;
      border: 2px dashed #94a3b8;
      border-radius: 12px;
      padding: 16px;
    }

.tiffin-box {
      /* Box Model Dimensions */
      width: 100%;
      padding: 20px;
      border: 4px solid #4f46e5;
      margin-bottom: 16px;
      background-color: #e0e7ff;
      border-radius: 8px;
    }

.tiffin-content {
      background: #ffffff;
      border: 2px dashed #6366f1;
      padding: 12px;
      text-align: center;
      font-weight: 700;
      color: #312e81;
      border-radius: 6px;
    }

.stat-badge {
      display: block;
      margin-top: 6px;
      font-size: 12px;
      font-weight: 500;
      color: #4338ca;
    }
  </style>
</head>
<body>
  <div class="shelf">
    <div class="tiffin-box">
      <div class="tiffin-content">
        🍱 Delicious Roti & Sabzi (Content)
        <span class="stat-badge">Padding: 20px | Border: 4px</span>
      </div>
    </div>
    <p style="font-size: 13px; color: #64748b; text-align: center;">
      With <code>box-sizing: border-box;</code>, this entire lunchbox fits neatly inside the 340px shelf without overflowing!
    </p>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

📐 गणितीय तुलना: content-box बनाम border-box

आइए देखें कि जब हम किसी एलिमेंट पर यह स्टाइल लगाते हैं, तो ब्राउज़र दोनों मोड्स में क्या गणित लगाता है:width: 300px; padding: 25px; border: 5px solid #4f46e5; margin: 20px;

content-box (डिफ़ॉल्ट)

अप्रत्याशित

दी गई width केवल अंदरूनी कंटेंट पर लगती है। पैडिंग और बॉर्डर बाहर जुड़ जाते हैं:

कंटेंट चौड़ाई: 300px

+ बायाँ और दायाँ पैडिंग: 25px + 25px = 50px

+ बायाँ और दायाँ बॉर्डर: 5px + 5px = 10px

स्क्रीन पर वास्तविक चौड़ाई: 360px!

+ मार्जिन (20px × 2) = कुल लेआउट स्पेस 400px.

⚠️ यदि यह 300px के पैरेंट में रखा गया, तो 60px बाहर निकल जाएगा और मोबाइल पर हॉरिजॉन्टल स्क्रॉल बार आ जाएगा!

border-box (इंडस्ट्री स्टैंडर्ड)

अनुशंसित

दी गई width बॉर्डर से बॉर्डर तक की अंतिम कुल सीमा तय करती है:

तय की गई कुल चौड़ाई: 300px

- बायाँ और दायाँ पैडिंग: 25px + 25px = -50px

- बायाँ और दायाँ बॉर्डर: 5px + 5px = -10px

अंदरूनी कंटेंट चौड़ाई: 240px

स्क्रीन पर वास्तविक चौड़ाई: ठीक 300px!

✅ गारंटी है कि यह 300px के पैरेंट में बिल्कुल सटीक फिट होगा, चाहे पैडिंग या बॉर्डर कितना भी मोटा हो जाए।

गोल्डन यूनिवर्सल CSS रीसेटBootstrap, Tailwind, और आधुनिक वेब ऐप्स में अनिवार्य

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

छद्म तत्वों (`::before` और `::after`) पर भी `border-box` लागू करने से रिबन, बैज और टूलटिप्स भी सटीक आकार में रहते हैं।

🔄 शॉर्टहैंड सिंटैक्स और घड़ी की दिशा वाला “TRBL” नियम

`margin` और `padding` दोनों 1, 2, 3 या 4 वैल्यूज स्वीकार करते हैं। दिशा याद रखने के लिए अंग्रेजी शब्द TRBL (“trouble”) याद रखें: घड़ी की दिशा में 12 बजे से शुरू — Top → Right → Bottom → Left।

1 मान (Value)padding: 16px;

चारों दिशाओं (Top, Right, Bottom, Left) में एक साथ 16px लागू होता है।

2 मान (Values)padding: 12px 24px;

[ऊपर/नीचे] [दाएँ/बाएँ]
12px Top & Bottom,
24px Left & Right.

3 मान (Values)padding: 10px 20px 30px;

[Top] [Horizontal] [Bottom]
10px ऊपर, 20px अगल-बगल, 30px नीचे।

4 मान (Values)padding: 5px 10px 15px 20px;

[Top] [Right] [Bottom] [Left]
घड़ी की सुई की तरह पूरा चक्कर!

💥 मार्जिन कोलैप्स (Margin Collapse) का पूरा विज्ञान

नॉर्मल डॉक्यूमेंट फ्लो में ब्लॉक एलिमेंट्स की वर्टिकल मार्जिन आपस में जुड़ने के बजाय मिल (collapse हो) जाती हैं। यह तीन प्रमुख स्थितियों में होता है:

1. सहोदर एलिमेंट्स (Sibling Collapse)

जब ऊपर वाले का `margin-bottom: 40px` और नीचे वाले का `margin-top: 25px` हो, तो गैप 65px बनने के बजाय केवल max(40px, 25px) = 40px बनता है।

परिणाम: 40px दूरी

2. पैरेंट-चाइल्ड लीकेज (Parent-Child)

यदि पैरेंट पर कोई बॉर्डर या पैडिंग न हो, और उसके पहले बच्चे का `margin-top: 30px` हो, तो बच्चे का मार्जिन पैरेंट से बाहर निकलकर पूरे पैरेंट को नीचे खिसका देता है!

समाधान: 1px पैडिंग या display: flow-root

3. खाली ब्लॉक (Empty Block)

यदि किसी खाली एलिमेंट पर `margin-top: 20px` और `margin-bottom: 20px` लगा हो और उसमें कोई हाइट या कंटेंट न हो, तो उसकी दोनों मार्जिन मिलकर सिर्फ 20px रह जाती हैं।

परिणाम: 20px वर्टिकल जगह

🚫 जहाँ Margin Collapse कभी नहीं होता:

हॉरिजॉन्टल मार्जिन: Left और Right मार्जिन कभी आपस में नहीं मिलतीं; वे हमेशा जुड़ती हैं।
Flexbox व CSS Grid: फ्लेक्स और ग्रिड कंटेनर के बच्चों में मार्जिन कभी कोलैप्स नहीं होती।
Block Formatting Context (BFC): जिस कंटेनर पर `display: flow-root;` या `overflow: hidden;` लगा हो, वह बच्चों की मार्जिन को बाहर नहीं जाने देता।
Absolute / Fixed एलिमेंट्स: `position: absolute;` वाले तत्व स्वतंत्र होते हैं और कोलैप्स से मुक्त रहते हैं।

🌐 मॉडर्न CSS: फिजिकल बनाम लॉजिकल प्रॉपर्टीज

आजकल वेबसाइट्स को अरबी या उर्दू जैसी दाएँ-से-बाएँ (RTL) पढ़ी जाने वाली भाषाओं में भी बदला जाता है। `margin-left: 20px` लिखने से वह RTL में उल्टी दिशा में खाली जगह छोड़ देगा। इसीलिए मॉडर्न CSS में लॉजिकल प्रॉपर्टीज का इस्तेमाल किया जाता है:

पुरानी फिजिकल प्रॉपर्टी	मॉडर्न लॉजिकल प्रॉपर्टी	इसका क्या अर्थ है	यह क्यों बेहतर है
padding-left / right	padding-inline: 1.5rem;	पढ़ने की लाइन के आरंभ और अंत पर पैडिंग	RTL में अपने-आप पलट जाती है
margin-top / bottom	margin-block: 2rem;	ब्लॉक के ऊपर और नीचे का वर्टिकल स्पेस	2 लाइनों के कोड को 1 लाइन में समेटता है
margin-left: auto; margin-right: auto;	margin-inline: auto;	ब्लॉक एलिमेंट को क्षैतिज रूप से बीच में लाना	मॉडर्न सेंटरिंग का सबसे साफ तरीका
border-left: 4px solid blue;	border-inline-start: 4px solid blue;	पढ़ने की शुरुआत वाली दिशा में बॉर्डर	अंग्रेजी में बाएँ, अरबी में दाएँ!

कोड का पंक्ति-दर-पंक्ति विश्लेषण (Line-by-Line Breakdown)

* { box-sizing: border-box; margin: 0; padding: 0; }

वेबसाइट का मुख्य रीसेट। यह ब्राउज़र के अनचाहे डिफ़ॉल्ट मार्जिन हटाता है और हर एलिमेंट के लिए बॉक्स साइजिंग को अनुमानित और सुरक्षित बनाता है।

.shelf { width: 340px; padding: 16px; border: 2px dashed #94a3b8; }

बाहरी शेल्फ (कंटेनर) तय करता है। `border-box` होने के कारण, यह शेल्फ स्क्रीन पर कभी भी 340px से ज्यादा चौड़ा नहीं होगा।

.tiffin-box { width: 100%; padding: 20px; border: 4px solid #4f46e5; }

पैरेंट की 100% चौड़ाई लेता है। इसकी 20px पैडिंग और 4px बॉर्डर उसी 100% के अंदर रहती हैं और बाहर नहीं छलकतीं।

margin-bottom: 16px;

टिफिन बॉक्स के नीचे 16px की खाली जगह छोड़ता है ताकि नीचे वाला पैराग्राफ उससे चिपक न जाए।

🧠 अपनी समझ की जाँच करें: CSS Box Model

Q1यदि किसी एलिमेंट में `width: 200px; padding: 20px; border: 5px solid black;` हो और डिफ़ॉल्ट `box-sizing: content-box;` हो, तो स्क्रीन पर उसकी कुल रेंडर चौड़ाई (total rendered width) कितनी होगी?

Q2वेब डेवलपमेंट का यूनिवर्सल रीसेट `, ::before, *::after { box-sizing: border-box; }` क्या काम करता है?

Q3नॉर्मल डॉक्यूमेंट फ्लो में जब एलिमेंट A का `margin-bottom: 30px` हो और ठीक नीचे वाले एलिमेंट B का `margin-top: 20px` हो, तो उनके बीच की दूरी कितनी होगी?

Q4CSS में प्रतिशत आधारित पैडिंग (जैसे `padding-top: 50%`) किसके आधार पर कैलकुलेट होती है?

🛠️

प्रैक्टिस चैलेंज: टिफिन बॉक्स को तोड़ें और सुधारें

खुद हाथों से प्रयोग करना ही बॉक्स मॉडल को हमेशा के लिए याद रखने का सबसे कारगर तरीका है। दाएँ हाथ के लाइव कोड एडिटर में यह करें:

स्टेप 1: सबसे ऊपर लगे * सिलेक्टर में से box-sizing: border-box; को कमेंट कर दें या उसकी जगह box-sizing: content-box; लिखें।
स्टेप 2: .tiffin-box के अंदर padding: 20px; को बदलकर padding: 48px; कर दें। ध्यान से देखें कि टिफिन बॉक्स किस तरह शेल्फ की बाउंड्री तोड़कर दाईं तरफ बाहर निकल जाता है!
स्टेप 3: अब सीधे .tiffin-box के अंदर box-sizing: border-box; जोड़ें। देखें कि कैसे वह तुरंत 48px पैडिंग बनाए रखते हुए शेल्फ के अंदर वापस सिकुड़ जाता है!
स्टेप 4 (बोनस): margin-bottom: 16px; की जगह मॉडर्न लॉजिकल प्रॉपर्टी margin-block-end: 24px; लगाकर देखें।

💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें

.tiffin-box { box-sizing: border-box; width: 100%; padding: 48px; border: 4px solid #4f46e5; margin-block-end: 24px; background-color: #e0e7ff; border-radius: 8px; }

सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न

❌ गलती: width: 100% और Margin से ओवरफ्लो होना

`border-box` होने के बावजूद width: 100%; margin: 0 20px; लगाने से बॉक्स बाहर निकल जाएगा! क्यों? क्योंकि `border-box` केवल padding और border को width के अंदर समेटता है, मार्जिन तो हमेशा बॉक्स के बाहर रहता है। ब्लॉक एलिमेंट्स पर जबरन `width: 100%` न लिखें — वे डिफ़ॉल्ट रूप से मार्जिन को घटाकर बची हुई जगह में खुद ही फैल जाते हैं!

✅ प्रो टिप: डिबगिंग के लिए Border नहीं, Outline इस्तेमाल करें

लेआउट बग्स ढूंढते समय कभी भी border: 1px solid red; न लगाएं, क्योंकि बॉर्डर बॉक्स का आकार बदल देता है जिससे पूरा लेआउट हिल जाता है! इसके बजाय outline: 1px solid red; का उपयोग करें। आउटलाइन बॉक्स मॉडल के बाहर तैरती है और पेज लेआउट को 1 पिक्सेल भी प्रभावित नहीं करती।

💬 Interview Q: Margin Collapse क्यों बनाया गया था, और पैरेंट-चाइल्ड मार्जिन लीकेज को कैसे रोकें?

ऐतिहासिक कारण: इसे इसलिए बनाया गया था ताकि हेडिंग और पैराग्राफ्स के बीच अनजाने में डबल मार्जिन इकट्ठा न हो जाए और अखबार या किताबों जैसा सुंदर टाइपोग्राफिक लेआउट बिना हर टैग पर अलग क्लास लगाए बन सके।

पैरेंट-चाइल्ड लीकेज: जब पैरेंट पर कोई बॉर्डर या पैडिंग नहीं होती, तो पहले चाइल्ड का वर्टिकल मार्जिन पैरेंट से बाहर निकलकर पूरे पैरेंट को नीचे धकेल देता है।

मॉडर्न समाधान:

पैरेंट पर display: flow-root; लगा दें। यह नया ब्लॉक फॉर्मेटिंग कॉन्टेक्स्ट (BFC) बना देता है बिना ड्रॉपडाउन मेनू काटे (जो overflow: hidden में कट जाते हैं)।
पैरेंट पर padding-top: 1px; या पारदर्शी बॉर्डर लगा दें।
पैरेंट को display: flex; या display: grid; में बदल दें, जहाँ मार्जिन कोलैप्स अपने आप बंद हो जाता है।

💬 Interview Q: नेगेटिव मार्जिन (Negative Margins) कैसे काम करते हैं और इनके वास्तविक उपयोग क्या हैं?

पैडिंग की तरह मार्जिन सिर्फ पॉजिटिव नहीं होती; यह नेगेटिव वैल्यूज (जैसे margin-top: -30px;) भी स्वीकार करती है।

नेगेटिव Top/Left: यह खुद एलिमेंट को ऊपर या बाईं तरफ खींचता है, जिससे वह अपने से पहले वाले एलिमेंट पर चढ़ (overlap) जाता है।
नेगेटिव Bottom/Right: यह खुद को नहीं हिलाता, बल्कि अपने बाद आने वाले भाई-बहनों को अपनी तरफ खींच लेता है!

वास्तविक उपयोग: हीरो बैनर के ऊपर तैरते हुए कार्ड्स बनाना, अवतार ग्रुप्स में चेहरों को एक-दूसरे पर ओवरलैप कराना (margin-inline-start: -12px), और सीमित कंटेनर से बाहर पूरी स्क्रीन तक फैलने वाले ब्रेकआउट सेक्शन बनाना।

💬 Interview Q: बटन्स जैसे इंटरैक्टिव तत्वों में `padding` और `margin` के बीच क्या बड़ा UX अंतर है?

यह एक्सेसिबिलिटी और यूज़र एक्सपीरियंस का सबसे महत्वपूर्ण नियम है:

Padding क्लिक करने योग्य क्षेत्र (Hit Area) को बढ़ाती है। जब आप बटन पर padding: 16px 24px लगाते हैं, तो उस पूरे 16px के अंदर कहीं भी क्लिक या टच करने पर बटन दबता है। मोबाइल टच स्क्रीन पर (WCAG के 44×44px न्यूनतम मानक के अनुसार) अच्छी पैडिंग अनिवार्य है।

Margin पर क्लिक काम नहीं करता। यदि आप बटन का मार्जिन बढ़ा देंगे, तो खाली जगह तो बढ़ जाएगी, लेकिन उस जगह पर टच करने पर बटन नहीं दबेगा बल्कि बैकग्राउंड पर क्लिक माना जाएगा, जिससे यूज़र चिढ़ जाता है।

💬 Interview Q: `box-sizing: border-box` का `min-width` और `max-width` पर क्या प्रभाव पड़ता है?

CSS बॉक्स साइजिंग मॉड्यूल लेवल 3 के अनुसार, box-sizing सिर्फ `width` पर ही नहीं, बल्कि `min-width`, `max-width`, `min-height`, और `max-height` पर भी समान रूप से लागू होता है।

border-box के तहत, जब आप max-width: 600px; padding: 20px; border: 2px solid; लगाते हैं, तो बॉक्स की बाहरी सीमा किसी भी हाल में 600px से अधिक नहीं होगी। ब्राउज़र 40px पैडिंग और 4px बॉर्डर को 600px में से घटाकर अंदरूनी कंटेंट को अधिकतम 556px तक ही सीमित रखेगा।

अगला लेसनBorders, Shadows & Glassmorphism