box-sizing: border-box શું કરે છે?

Question

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

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

શા માટે તે મહત્વપૂર્ણ છે

ફિક્સ: border-box

સાર્વત્રિક રીસેટ

શા માટે તે મહત્વપૂર્ણ છે

સંબંધિત પ્રશ્નો