Τι είναι το μοντέλο κουτιού, από τι αποτελείται και…

Το μοντέλο κουτιού (CSS Box Model) είναι μια αφηρημένη οντότητα που περιγράφει πώς τα στοιχεία HTML εμφανίζονται στη σελίδα με τη μορφή ορθογωνικών μπλοκ. Ορίζει το μέγεθος και τη διάταξη του περιεχομένου, των εσωτερικών περιθωρίων, των περιόρων και των εξωτερικών περιθωρίων του στοιχείου.

Το μοντέλο κουτιού αποτελείται από τα ακόλουθα μέρη:

Περιεχόμενο: Το περιεχόμενο του στοιχείου (κείμενο, εικόνες κ.λπ.). Το μέγεθός του καθορίζεται από τις ιδιότητες width και height.
Padding (Εσωτερικό περιθώριο): Ο χώρος μεταξύ του περιεχομένου του στοιχείου και του περιγράμματός του. Ορίζεται από τις ιδιότητες padding-top, padding-right, padding-bottom, padding-left ή την σύντομη ιδιότητα padding.
Περιγράμμα (Border): Το περίγραμμα γύρω από το εσωτερικό padding και το περιεχόμενο. Ορίζεται από τις ιδιότητες border-width, border-style, border-color ή την σύντομη ιδιότητα border.
Εξωτερικό περιθώριο (Margin): Ο χώρος μεταξύ του περιγράμματος του στοιχείου και των εξωτερικών στοιχείων. Ορίζεται από τις ιδιότητες margin-top, margin-right, margin-bottom, margin-left ή την σύντομη ιδιότητα margin.

Υπάρχουν δύο βασικοί τύποι μοντέλου κουτιού, που καθορίζονται από την ιδιότητα box-sizing:

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

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Προσθέτει 20px στο συνολικό μέγεθος σε κάθε άξονα */
  border: 2px solid black; /* Προσθέτει 4px στο συνολικό μέγεθος σε κάθε άξονα */
  box-sizing: content-box; /* Προεπιλεγμένη συμπεριφορά */
}
/* Το συνολικό μέγεθος του στοιχείου θα είναι 124px επί 124px */

border-box: Το πλάτος και το ύψος του στοιχείου, που ορίζονται από τις ιδιότητες width και height, περιλαμβάνουν το περιεχόμενο, το padding και το border. Το padding και το border δεν αυξάνουν το συνολικό μέγεθος του στοιχείου, αλλά "συμπιέζουν" την περιοχή περιεχομένου.
```
div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Περιλαμβάνεται στο συνολικό πλάτος/ύψος */
  border: 2px solid black; /* Περιλαμβάνεται στο συνολικό πλάτος/ύψος */
  box-sizing: border-box;
}
/* Το συνολικό μέγεθος του στοιχείου θα είναι 100px επί 100px */
```

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

Τι είναι το μοντέλο κουτιού, από τι αποτελείται και ποια είδη υπάρχουν;