Στο σημείο αυτό υπενθυμίζω τι είναι στοιχείο μιας ιστοσελίδας.:
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ.
Κάθε στοιχείο λοιπόν, έχει 3 ιδιότητες που αφορούν την σχέση τους με τα υπόλοιπα γειτονικά στοιχεία, αλλά και την εμφάνιση τους:
Η w3.org, η οποία ανέπτυξε και διαχειρίζεται τα πρότυπα της CSS και της HTML, ομαδοποίησε αυτές τις ιδιότητες χρησιμοποιώντας τον ορισμό Box model, ο οποίος απεικονίζεται παρακάτω:
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ.
Κάθε στοιχείο λοιπόν, έχει 3 ιδιότητες που αφορούν την σχέση τους με τα υπόλοιπα γειτονικά στοιχεία, αλλά και την εμφάνιση τους:
- ο κενός χώρος μεταξύ του πλαισίου και των γειτονικών στοιχείων (margin)
- το πλαίσιο (border)
- ο κενός χώρος μεταξύ του περιεχομένου του στοιχείου και του πλαισίου του (padding)
Η w3.org, η οποία ανέπτυξε και διαχειρίζεται τα πρότυπα της CSS και της HTML, ομαδοποίησε αυτές τις ιδιότητες χρησιμοποιώντας τον ορισμό Box model, ο οποίος απεικονίζεται παρακάτω:
- Το margin (η περιοχή με άσπρο, ή αν θέλετε διαφανές, χρώμα) καθορίζει την περιοχή έξω από το πλαίσιο (border) του στοιχείου. Ο χώρος αυτός δεν έχει χρώμα, καθώς είναι πάντα transparent (διαφανές)
- Το border (η περιοχή με κόκκινο χρώμα) ορίζει το πάχος και το χρώμα του πλαισίου γύρω απο το στοιχείο
- Το padding ((η περιοχή με πορτοκαλί χρώμα)) ορίζει την περιοχή μεταξύ του πλαισίου (border) και του περιεχομένου του στοιχείου. Η περιοχή αυτή μπορεί να έχει background ένα χρώμα ή μια εικόνα
- Το περιεχόμενο (η περιοχή με κίτρινο χρώμα) είναι το κείμενο ή η εικόνα