Τι είναι η ιδιότητα box-sizing: border-box και ποιο ρόλο παίζει στο CSS;

Η ιδιότητα box-sizing καθορίζει πώς υπολογίζεται το συνολικό πλάτος και ύψος ενός στοιχείου.

box-sizing: content-box (προεπιλεγμένη τιμή) — το πλάτος και το ύψος αναφέρονται μόνο στο περιεχόμενο (content). Το padding και το border προστίθενται στις καθορισμένες τιμές πλάτους/ύψους.

box-sizing: border-box — το πλάτος και το ύψος περιλαμβάνουν το padding και το border. Το content συμπιέζεται ώστε να χωράει μέσα στις καθορισμένες διαστάσεις.

Ο ρόλος του box-sizing: border-box στο CSS:

• Απλοποίηση των υπολογισμών: Διευκολύνει τον υπολογισμό των διαστάσεων των στοιχείων, ειδικά όταν χρησιμοποιούνται padding και border.
• Προβλεψιμότητα στη διάταξη: Επιτρέπει τον ακριβή καθορισμό των διαστάσεων των μπλοκ, ανεξάρτητα από το padding και το border, καθιστώντας τη διάταξη πιο προβλέψιμη.
• Άνεση στο μοντέλο κουτιού: Συμφωνεί με την εννοιολογική κατανόηση του μεγέθους του μπλοκ — τα περιγράμματά του. Διευκολύνει τη δημιουργία πλέγματος και σταθερών συστατικών.

Παράδειγμα:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Συνολικό πλάτος = 100 + 10*2 + 1*2 = 122px */
  /* Συνολικό ύψος = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Συνολικό πλάτος = 100px */
  /* Συνολικό ύψος = 100px */
  /* Το περιεχόμενο θα καταλαμβάνει 100 - 10*2 - 1*2 = 78px σε πλάτος και ύψος */
}