CSS Box Sizing
आप जानते हैं कि padding और border घोषित width से बॉक्स को बड़ा कर सकते हैं। box-sizing इस हिसाब का नियम चुनता है: क्या width का मतलब «सिर्फ content» है, या «content + padding + border»?
एक नज़र में दो मॉडल
📊 content-box बनाम border-box
| मॉडल | width / height क्या कवर करते हैं |
रोज़ का असर |
|---|---|---|
content-box (डिफ़ॉल्ट) |
सिर्फ content | Padding और border घोषित आकार के बाहर जुड़ते हैं |
border-box |
content + padding + border | घोषित आकार बाहरी border किनारा है; content सिकुड़कर समाता है |
| Margin | किसी में शामिल नहीं | बाहरी अंतराल box-sizing से अलग रहता है |
डिफ़ॉल्ट: content-box
डिफ़ॉल्ट मॉडल में width: 200px content मापता है। Padding और border जोड़ें — रंगी बॉक्स बढ़ती है।
Content-box (डिफ़ॉल्ट)
css.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* content 200px + padding + border → कुल चौड़ाई ज़्यादा */border-box पर जाएँ
border-box के साथ वही width: 200px padding और border शामिल करता है। बाहरी किनारा ~200px के करीब रहता है; content क्षेत्र छोटा होता है।
Border-box साइज़िंग
css.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* बाहरी border बॉक्स 200px लक्ष्य; content सिकुड़ता है */एक जैसी संख्याएँ, अलग फुटप्रिंट
दोनों मॉडल को समान width, padding और border के साथ साथ रखें।
दो मॉडल की तुलना
css.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}
.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* घोषणाएँ एक जैसी; .contenty ज़्यादा क्षैतिज जगह लेता है */टीमें border-box क्यों पसंद करती हैं
जब कार्ड को कॉलम ठीक भरना हो — जैसे width: 100% के साथ padding — border-box कार्ड को parent से बाहर निकलने से बचाता है।
कॉलम-अनुकूल कार्ड
css.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}एक शांत वैश्विक आदत
कई स्टाइलशीट एक बार सब पर border-box सेट करती हैं ताकि रोज़ की चौड़ाई गणना अनुमानित रहे। Margin अभी भी बाहर है।
सार्वत्रिक border-box आदत
css*,
*::before,
*::after {
box-sizing: border-box;
}खुद आज़माएँ
- content-box के तहत
width: 200px, padding और border से.panel-contentबनाएँ। box-sizing: border-boxके साथ.panel-borderकॉपी करें — बाहरी आकार 200px के करीब आता देखें।- समान संख्याओं से
.contentyऔर.borderishसाथ रखें। - padding वाली
width: 100%कार्ड बनाएँ; box-sizing टॉगल करें और देखें कौन overflow करता है। - छोटी डेमो पेज पर सार्वत्रिक
*आदत आज़माएँ।
आम गलतियाँ
- सोचना कि border-box में margin भी शामिल है (नहीं)
- भूलना कि डिफ़ॉल्ट content-box है जब तक आप बदलें
- उम्मीद कि outline box-sizing का पालन करेगा (outline बाहर रहता है और अभी भी लेआउट जगह नहीं लेता)
- content-box के तहत भारी padding के साथ
width: 100%और overflow पर हैरानी - यह जाने बिना प्रतिशत मिलाना कि कौन सा साइज़िंग मॉडल सक्रिय है
सार
- डिफ़ॉल्ट
box-sizing: content-boxcontent मापता है; padding और border जुड़ते हैं border-boxघोषित width/height के अंदर padding और border रखता है- Margin दोनों मॉडलों के बाहर है
- Border-box अक्सर कॉलम चौड़ाई और
width: 100%कार्ड आसान बनाता है - सार्वत्रिक border-box रीसेट एक आम, शांत आदत है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी