Τι είναι το μοντέλο κουτιού στο CSS;

Το μοντέλο κουτιού στο CSS περιγράφει πώς υπολογίζεται ο χώρος που καταλαμβάνει ένα στοιχείο σε μια ιστοσελίδα. Περιλαμβάνει:

• Περιεχόμενο: Η περιοχή για το πραγματικό περιεχόμενο του στοιχείου (κείμενο, εικόνες).
• Padding (εσωτερικό περιθώριο): Ο χώρος μεταξύ του περιεχομένου και του περιγράμματος του στοιχείου.
• Border (περίγραμμα): Το περίγραμμα που περικλείει το padding και το περιεχόμενο.
• Margin (εξωτερικό περιθώριο): Ο χώρος γύρω από το περίγραμμα του στοιχείου, που το διαχωρίζει από άλλα στοιχεία.

Το προεπιλεγμένο μέγεθος ενός στοιχείου (στον τυπικό μοντέλο box-sizing: content-box) καθορίζεται από το άθροισμα των μεγεθών περιεχομένου, padding και border. Το margin προστίθεται στον συνολικό χώρο που καταλαμβάνει, αλλά δεν επηρεάζει το μέγεθος του ίδιου του στοιχείου.

Η ιδιότητα box-sizing: border-box αλλάζει τον τρόπο υπολογισμού του μεγέθους του στοιχείου, συμπεριλαμβάνοντας το padding και το border στο συνολικό πλάτος και ύψος. Σε αυτήν την περίπτωση, το μέγεθος του στοιχείου καθορίζεται από το width/height, και το padding και το border "καταναλώνουν" χώρο μέσα στο περιεχόμενο.

/* Τυπικό μοντέλο (προεπιλογή) */
.element-content-box {
  width: 100px; /* Μέγεθος περιεχομένου */
  padding: 10px;
  border: 5px solid black;
  /* Συνολικό πλάτος: 100px (περιεχόμενο) + 10px (padding αριστερά) + 10px (padding δεξιά) + 5px (border αριστερά) + 5px (border δεξιά) = 130px */
}

/* Μοντέλο border-box */
.element-border-box {
  width: 100px; /* Συνολικό πλάτος: περιεχόμενο + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Μέγεθος περιεχομένου: 100px - 10px (padding αριστερά) - 10px (padding δεξιά) - 5px (border αριστερά) - 5px (border δεξιά) = 70px */
}

Η κατανόηση του μοντέλου κουτιού είναι κρίσιμη για την ακριβή τοποθέτηση και σύνθεση των στοιχείων στη σελίδα.