box-sizing: border-box ले के गर्छ?

Question

Accepted Answer

`box-sizing` ले नियन्त्रण गर्छ कि **`width` र `height` प्रॉपर्टीहरूले वास्तवमा के मापन गर्छन्**। डिफल्ट (`content-box`) केवल कन्टेन्ट मापन गर्छ; `border-box` ले तिनलाई padding र border समावेश गर्न बनाउँछ।

## डिफल्ट (content-box) को समस्या

```css
.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% को बाहिर जान्छ।

## समाधान: border-box

```css
.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 अन्दरबाट घटाइन्छ। तपाईंले सेट गरेको सङ्ख्या नै साइज हुन्छ, जो धेरै अधिक सहज हुन्छ।

## विश्वव्यापी reset

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

लगभग हरेक आधुनिक stylesheet, framework, र reset यलाई विश्वव्यापी रूपमा लागू गर्छ। यसले sizing अनुमानयोग्य बनाउँछ: `width: 50%` + padding ठीक 50% फराकिलो रहन्छ, दुई `width: 50%` बक्सहरू एक अर्कोको छेउमा बस्छन् बिना बाहिर जाए।

## यो किन महत्त्वपूर्ण छ

`border-box` ले एकल सबैभन्दा सामान्य लेआउट-गणित सिरदर्दको स्रोत हटाउँछ — हरेक चौडाइमा padding र border मानसिक रूपमा जोड्न गर्नु पर्छ।

यलाई विश्वव्यापी सेट गर्नु एक सर्वोत्तम-अभ्यास डिफल्ट मानिन्छ, किनकि "मैले सेट गरेको चौडाइ नै मेरो चौडाइ हुन्छ" भन्ने सोच साइजङ कसरी काम गर्छ भन्ने कुरामा तपाई प्राकृतिक रूपमा आशा गर्नुहुन्छ।