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

Στο CSS, το μοντέλο κουτιού περιγράφει μια ορθογώνια περιοχή που δημιουργείται για κάθε στοιχείο και χρησιμοποιείται για τον υπολογισμό των διαστάσεων και της θέσης του. Αποτελείται από τέσσερα μέρη:

• Κουτί περιεχομένου: Η περιοχή όπου εμφανίζεται το περιεχόμενο του στοιχείου (κείμενο, εικόνες κ.λπ.). Το μέγεθός του καθορίζεται από τις ιδιότητες width και height.
• Κουτί padding: Ο χώρος μεταξύ του περιγράμματος του περιεχομένου και του περιγράμματος του στοιχείου. Το μέγεθός του καθορίζεται από την ιδιότητα padding. Το χρώμα φόντου και η εικόνα του στοιχείου επεκτείνονται σε αυτήν την περιοχή.
• Κουτί περιγράμματος (border): Το περίγραμμα του στοιχείου που περικλείει το κουτί padding. Το μέγεθός του καθορίζεται από τις ιδιότητες border.
• Κουτί περιθωρίου (margin): Ο χώρος γύρω από το περίγραμμα του στοιχείου, που το διαχωρίζει από άλλα στοιχεία. Το μέγεθός του καθορίζεται από την ιδιότητα margin. Αυτή η περιοχή είναι πάντα πλήρως διαφανής.

Ο προεπιλεγμένος υπολογισμός μεγέθους του στοιχείου γίνεται ως εξής:

πλάτος = width + padding-left + padding-right + border-left-width + border-right-width
ύψος = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Η ιδιότητα box-sizing επιτρέπει την αλλαγή αυτού του μοντέλου:

• content-box (προεπιλογή): Τα μεγέθη width και height αναφέρονται μόνο στο κουτί περιεχομένου.
• border-box: Τα μεγέθη width και height περιλαμβάνουν το padding και το border.

.element-default {
  width: 100px; /* Πλάτος κουτιού περιεχομένου = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Πραγματικό πλάτος στοιχείου: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Πραγματικό πλάτος στοιχείου = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Πλάτος κουτιού περιεχομένου: 100 - 10 - 10 - 5 - 5 = 70px */
}