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` పై** జోడించబడ్డాయి, కాబట్టి మూలకం మీరు సెట్ చేసిన సంఖ్య కంటే విస్తృతమైనది ఉంటుంది. ఇది లేআউట్‌లను విచ్ఛిన్నం చేస్తుంది: padding కలిగిన `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` **చివరి** రెండర్ చేసిన వెడల్పు — padding మరియు border లోపల నుండి తీసివేయబడ్డాయి. మీరు సెట్ చేసిన సంఖ్య మీరు పొందిన పరిమాణం, ఇది చాలా వరకు సహజమైనది.

## సార్వత్రిక రీసెట్

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

ప్రతిచూ ఆధునిక స్టైల్‌షీట్, ఫ్రేమ్‌వర్క్ మరియు రీసెట్ దీనిని ప్రపంచవ్యాప్తంగా వర్తింపజేస్తుంది. ఇది సైజింగ్‌ను సూచించదగినదిగా చేస్తుంది: `width: 50%` + padding సరిగ్గా 50% వెడల్పుగా ఉంటుంది, రెండు `width: 50%` బాక్సులు ఓవర్‌ఫ్లో లేకుండా ఒకదానికొకటి కూర్చుంటాయి, మొదలైనవి.

## ఇది ఎందుకు ముఖ్యమైనది

`border-box` లేఅవుట్-గణితం సమస్యల యొక్క ఏకైక సర్వసాధారణ మూలం నుండి తొలగిస్తుంది — ప్రతి `width` కు padding మరియు border ను మానసికంగా జోడించవలసిన అవసరం.

ఇది ప్రపంచవ్యాప్తంగా సెట్ చేయడం సర్వోత్తమ-సాధన డిఫాల్ట్‌గా పరిగణించబడుతుంది, ఎందుకంటే "నేను సెట్ చేసిన వెడల్పు నేను పొందిన వెడల్పు" సైజింగ్ సహజంగా ఎలా పనిచేయాలో మీరు ఆశించినది.