Ποια είναι η διαφορά μεταξύ box-sizing: content-box και border-box;

Η διαφορά μεταξύ box-sizing: content-box και box-sizing: border-box βρίσκεται στον τρόπο που ο περιηγητής υπολογίζει το συνολικό μέγεθος του στοιχείου:

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

• border-box: το πλάτος και το ύψος περιλαμβάνουν το περιεχόμενο, το padding και το border. Με άλλα λόγια, το padding και το border "χωρούν" μέσα στις ορισμένες διαστάσεις.

Παράδειγμα:

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

• Με content-box, το συνολικό πλάτος θα είναι: 200 + 102 + 52 = 230px.
• Με border-box, το συνολικό πλάτος θα παραμείνει 200px, και το περιεχόμενο θα μειωθεί για να χωρέσει το padding και το border.

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