box-sizing ले नियन्त्रण गर्छ कि width र height प्रॉपर्टीहरूले वास्तवमा के मापन गर्छन्। डिफल्ट (content-box) केवल कन्टेन्ट मापन गर्छ; border-box ले तिनलाई padding र border समावेश गर्न बनाउँछ।
box-sizing ले नियन्त्रण गर्छ कि width र height प्रॉपर्टीहरूले वास्तवमा के मापन गर्छन्। डिफल्ट (content-box) केवल कन्टेन्ट मापन गर्छ; border-box ले तिनलाई padding र border समावेश गर्न बनाउँछ।
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
content-box को साथ, padding र border width को शीर्षमा जोडिन्छन्, त्यसैले एलिमेन्ट तपाईंले सेट गरेको सङ्ख्या भन्दा फराकिलो हुन्छ। यो लेआउट तोड्छ: एक width: 50% बक्स जसमा padding छ भने यो आफ्नो 50% को बाहिर जान्छ।
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box को साथ, width अन्तिम रेन्डर गरिएको चौडाइ हो — padding र border अन्दरबाट घटाइन्छ। तपाईंले सेट गरेको सङ्ख्या नै साइज हुन्छ, जो धेरै अधिक सहज हुन्छ।
*, *::before, *::after {
box-sizing: border-box;
}
लगभग हरेक आधुनिक stylesheet, framework, र reset यलाई विश्वव्यापी रूपमा लागू गर्छ। यसले sizing अनुमानयोग्य बनाउँछ: width: 50% + padding ठीक 50% फराकिलो रहन्छ, दुई width: 50% बक्सहरू एक अर्कोको छेउमा बस्छन् बिना बाहिर जाए।
border-box ले एकल सबैभन्दा सामान्य लेआउट-गणित सिरदर्दको स्रोत हटाउँछ — हरेक चौडाइमा padding र border मानसिक रूपमा जोड्न गर्नु पर्छ।
यलाई विश्वव्यापी सेट गर्नु एक सर्वोत्तम-अभ्यास डिफल्ट मानिन्छ, किनकि "मैले सेट गरेको चौडाइ नै मेरो चौडाइ हुन्छ" भन्ने सोच साइजङ कसरी काम गर्छ भन्ने कुरामा तपाई प्राकृतिक रूपमा आशा गर्नुहुन्छ।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्