Τι κάνει box-sizing: border-box;

Question

IT Interview Practice · 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`, οπότε το στοιχείο καταλήγει να είναι ευρύτερο από τον αριθμό που ορίσατε. Αυτό σπάει τις διατάξεις: ένα πλαίσιο `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;
}
```

Σχεδόν κάθε σύγχρονο φύλλο στυλ, framework και reset εφαρμόζει αυτό σε παγκόσμιο επίπεδο. Κάνει τη δημιουργία μεγεθών προβλέψιμη: `width: 50%` + padding παραμένει ακριβώς 50% ευρύ, δύο πλαίσια `width: 50%` κάθονται δίπλα δίπλα χωρίς υπερχείλιση, κ.λπ.

## Γιατί είναι σημαντικό

`border-box` αφαιρεί την απλή πιο κοινή πηγή πονοκεφάλων διάταξης — η ανάγκη να προσθέτετε νοερά το padding και το border σε κάθε πλάτος.

Η ορισμός του σε παγκόσμιο επίπεδο θεωρείται βέλτιστη πρακτική προεπιλογής, επειδή "το πλάτος που ορίζω είναι το πλάτος που παίρνω" είναι ο τρόπος που φυσικά περιμένετε να λειτουργεί η αλλαγή μεγέθους.

Το πρόβλημα με την προεπιλογή (content-box)

Η λύση: border-box

Η καθολική επαναφορά

Γιατί είναι σημαντικό

Σχετικές ερωτήσεις