box-sizing: border-box क्या करता है?

Question

Accepted Answer

`box-sizing` **`width` और `height` प्रॉपर्टीज वास्तव में क्या मापती हैं** को नियंत्रित करता है। डिफ़ॉल्ट (`content-box`) केवल सामग्री को मापता है; `border-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` के साथ, पैडिंग और बॉर्डर `width` **के ऊपर** जोड़े जाते हैं, इसलिए तत्व आपके द्वारा सेट की गई संख्या से बड़ा हो जाता है। यह लेआउट को तोड़ता है: `width: 50%` बॉक्स पैडिंग के साथ अपने 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` **अंतिम** रेंडर की गई चौड़ाई है — पैडिंग और बॉर्डर को अंदर से घटाया जाता है। आप जो संख्या सेट करते हैं वह आप जो आकार पाते हैं, जो कि बहुत अधिक सहज है।

## सार्वभौमिक रीसेट

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

लगभग हर आधुनिक स्टाइलशीट, फ्रेमवर्क और रीसेट इसे विश्व स्तर पर लागू करते हैं। यह आकार को अनुमानित करता है: `width: 50%` + पैडिंग बिल्कुल 50% चौड़ा रहता है, दो `width: 50%` बॉक्स बगल में बैठते हैं कोई ओवरफ्लो के बिना, आदि।

## यह क्यों महत्वपूर्ण है

`border-box` लेआउट-गणित के सिरदर्द का सबसे आम स्रोत को दूर करता है — हर चौड़ाई के लिए मानसिक रूप से पैडिंग और बॉर्डर जोड़ने की आवश्यकता है।

इसे विश्व स्तर पर सेट करना सर्वोत्तम-अभ्यास डिफ़ॉल्ट माना जाता है, क्योंकि "जो चौड़ाई मैं सेट करता हूँ वह चौड़ाई मैं प्राप्त करता हूँ" यह है कि आप स्वाभाविक रूप से कैसे आकार देने की अपेक्षा करते हैं।