CSS बॉक्स मॉडल
आप पहले से border, padding, margin और width जानते हैं। अब सबको एक नक्शे पर रखें। CSS बॉक्स मॉडल कहता है कि हर तत्व नेस्टेड परतों का सेट है: बीच में content, फिर padding, फिर border, फिर बाहर margin।
चार परतें
बॉक्स को अंदर से बाहर पढ़ें।
📊 बॉक्स मॉडल की परतें
| परत | कहाँ बैठती है | रोज़ का काम |
|---|---|---|
| Content | केंद्र | टेक्स्ट, चित्र और बच्चे यहाँ रहते हैं; width / height आमतौर पर यही मापते हैं |
| Padding | content और border के बीच | भीतरी गद्दी; बैकग्राउंड आमतौर पर इसे भरता है |
| Border | padding के चारों ओर | बॉक्स का खींचा हुआ किनारा |
| Margin | border के बाहर | बाहरी अंतराल जो इस बॉक्स को पड़ोसियों से अलग करता है |
पहले सिर्फ content का आकार
बिना padding और border की सादी चौड़ाई कहानी साफ़ रखती है।
सिर्फ content चौड़ाई
css.box-content {
width: 200px;
background-color: #ccfbf1;
}padding जोड़ें — रंगी हुई जगह बढ़ती है
Padding border के अंदर बैठती है। डिफ़ॉल्ट content-box मॉडल में padding content चौड़ाई के बाहर जोड़ी जाती है, इसलिए रंगी हुई बॉक्स चौड़ी हो जाती है।
content के साथ padding
css.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* content 200px रहता है; padding हर तरफ 20px जोड़ती है */border जोड़ें — अगला घेरा
Border padding के चारों ओर लिपटता है। डिफ़ॉल्ट साइज़िंग में border की मोटाई भी border बॉक्स के बाहरी आकार में जुड़ती है।
content, padding और border
css.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}चारों परतें साथ
Margin बैकग्राउंड नहीं रंगती; सिर्फ पड़ोसियों को दूर धकेलती है।
पूरा बॉक्स मॉडल नुस्खा
css.card {
width: 200px; /* content */
padding: 16px; /* भीतरी गद्दी */
border: 2px solid #134e4a; /* किनारा */
margin: 24px; /* बाहरी अंतराल */
background-color: #ecfdf5;
}एक जैसी चौड़ाई, अलग कुल आकार
दो बॉक्स width: 200px साझा कर सकते हैं, फिर भी जब padding और border नुस्खे में आएँ तो बहुत अलग लगें।
सादा बनाम पैडेड तुलना
css.bare {
width: 200px;
background-color: #fef3c7;
}
.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* दोनों width 200px कहते हैं; .padded ज़्यादा क्षैतिज जगह लेता है */याद रखने वाला डिफ़ॉल्ट नियम
डिफ़ॉल्ट रूप से (box-sizing: content-box), width और height content बॉक्स बताते हैं। Padding और border अक्सर अंतिम दिखने वाली बॉक्स को बड़ा करते हैं। बाद का पाठ box-sizing: border-box कवर करता है, जो यह हिसाब बदलता है।
खुद आज़माएँ
- सिर्फ
width: 200pxऔर बैकग्राउंड से.box-contentबनाएँ। - कॉपी करें,
padding: 20pxजोड़ें, और रंगी जगह बढ़ते देखें। - मोटी border जोड़ें और फिर कुल आकार देखें।
margin: 24pxरखें और पुष्टि करें कि पड़ोसी दूर जाते हैं बिना बैकग्राउंड उस गैप को भरे।.bareऔर.paddedसाथ रखें — घोषित चौड़ाई एक, फुटप्रिंट अलग।
आम गलतियाँ
- सोचना कि margin बैकग्राउंड फिल का हिस्सा है (यह बाहर है और अक्सर पारदर्शी)
width: 200pxघोषित कर भारी padding के बाद भी border बॉक्स ठीक 200px रहने की उम्मीद (content-box के साथ नहीं)- परतों का क्रम मिलाना (content → padding → border → margin)
- outline को border समझना (अलग उपकरण)
- डिफ़ॉल्ट मॉडल समझने से पहले border-box आदत पर कूदना
सार
- हर तत्व में content, padding, border और margin परतें होती हैं
- Padding border के अंदर है; margin बाहर
- डिफ़ॉल्ट width/height content बॉक्स मापते हैं
- Padding और border अक्सर कुल दिखने वाला आकार बढ़ाते हैं
- Margin बाहरी अलगाव बनाती है बिना फिल रंगे
box-sizing(अगला विशेष पाठ) चौड़ाई का हिसाब बदल सकता है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी