Πώς επηρεάζει η ιδιότητα box-sizing το μέγεθος του στοιχείου;

Η ιδιότητα CSS box-sizing καθορίζει πώς υπολογίζονται οι διαστάσεις ενός στοιχείου — αν συμπεριλαμβάνονται ή όχι τα εσωτερικά περιθώρια (padding) και τα περιγράμματα (border).

• Τιμή content-box (προεπιλογή): το πλάτος και το ύψος του στοιχείου ορίζουν μόνο το περιεχόμενο. Τα εσωτερικά περιθώρια και τα περιγράμματα προστίθενται σε αυτές τις διαστάσεις, αυξάνοντας το συνολικό μέγεθος του στοιχείου.

• Τιμή border-box: το πλάτος και το ύψος περιλαμβάνουν το περιεχόμενο, τα εσωτερικά περιθώρια και τα περιγράμματα. Αυτό σημαίνει ότι αν ορίσετε πλάτος 100px, το περιεχόμενο θα μειωθεί λαμβάνοντας υπόψη το padding και το border ώστε το συνολικό μέγεθος να παραμένει 100px.

Παράδειγμα:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Σε αυτή την περίπτωση, το στοιχείο .box θα έχει συνολικό πλάτος 200px, συμπεριλαμβανομένου του padding και του border. Αν ήταν content-box, το συνολικό πλάτος θα ήταν 200 + 210 + 25 = 230px.

Η χρήση του border-box απλοποιεί συχνά τη διάταξη, καθώς τα μεγέθη των στοιχείων δεν "διασπώνται" λόγω του padding και του border.