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: 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` ਲੇਆਉਟ-ਮਾਥ ਸਿਰਦਰਦ ਦੇ ਸਭ ਤੋਂ ਆਮ ਸਰੋਤ ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ — ਹਰ width ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ padding ਅਤੇ border ਜੋੜਨਾ ਪੜ੍ਹ ਰਿਹਾ ਹੈ।

ਇਸ ਨੂੰ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਸੈਟ ਕਰਨਾ ਇੱਕ best-practice ਡਿਫੌਲਟ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ "ਜੋ width ਮੈਂ ਸੈਟ ਕਰਦਾ ਹਾਂ ਉਹ width ਮੈਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹਾਂ" ਉਹ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਸਾਈਜ਼ਿੰਗ ਦੀ ਉਮੀਦ ਕਰਦੇ ਹੋ।