box-sizing: border-box काय करते?

Question

Accepted Answer

`box-sizing` नियंत्रित करते **की `width` आणि `height` गुणधर्म वास्तविकपणे काय मोजतात**. डिफॉल्ट (`content-box`) फक्त सामग्री मोजते; `border-box` त्यांना padding आणि border समाविष्ट करते.

## हे महत्वाचे का आहे

```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 आंतरिकदृष्ट्या वजा केले जातात. तुम्ही जो संख्या सेट केला तो आकार आहे जो तुम्हाला मिळतो, जो अधिक अंतर्ज्ञानी आहे.

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

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

जवळजवळ प्रत्येक आधुनिक स्टाइलशीट, फ्रेमवर्क आणि रीसेट हे विश्वव्यापीदृष्ट्या लागू करतो. हे आकारास भाग्यवान बनवते: `width: 50%` + padding अचूक 50% रुंद राहते, दोन `width: 50%` बॉक्स बाजूला बसतात अतिक्रमण न करता, इ..

## हे महत्वाचे का आहे

`border-box` लेआउट-math डोकेदुखीचा एकमेव सर्वात सामान्य स्रोत दूर करते — प्रत्येक width साठी मानसिकदृष्ट्या padding आणि border जोडणे आवश्यक आहे.

ते विश्वव्यापीदृष्ट्या सेट करणे सर्वोत्तम-अभ्यास डिफॉल्ट मानले जाते, कारण "मी सेट केलेली रुंदी मला मिळणारी रुंदी आहे" हे आहे की तुम्ही स्वाभाविकपणे आकार कसे कार्य करेल असे अपेक्षा करता.