რა აკეთებს 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` აღმოფხვრის layout-math ტკივილების ყველაზე საერთო წყაროს — padding და border მენტალურად დამატებული უნდა იყოს ყოველი width-ზე.

მისი გლობალური დაყენება ითვლება საუკეთესო-პრაქტიკის ნაგულისხმევი მნიშვნელობად, რადგან "სიგანე, რომელიც დავაყენე, არის სიგანე, რომელიც მივიღე" ის არის, როგორც ნატურალურად ელოდებოდით ზომების მუშაობას.