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` લેઆઉટ-ગણિતના માથાનું દુ:ખ નું સર્વ સામાન્ય સ્ત્રોત દૂર કરે છે — દરેક પહોળાઈમાં માનસિક રીતે પેડિંગ અને બોર્ડર ઉમેરવાનું.

તેને વૈશ્વિક રીતે સેટ કરવું બેસ્ટ-પ્રેક્ટિસ ડિફોલ્ટ માનવામાં આવે છે, કારણ કે "જે પહોળાઈ હું સેટ કરું છું તે પહોળાઈ હું મેળવું છું" તે રીતે છે તમે કુદરતી રીતે સાઇઝિંગ કામ કરવાની અપેક્ષા રાખો છો.