Box model

Στο σημείο αυτό υπενθυμίζω τι είναι στοιχείο μιας ιστοσελίδας.:
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ.

Κάθε στοιχείο λοιπόν, έχει 3 ιδιότητες που αφορούν την σχέση τους με τα υπόλοιπα γειτονικά στοιχεία, αλλά και την εμφάνιση τους:

• ο κενός χώρος μεταξύ του πλαισίου και των γειτονικών στοιχείων (margin)
• το πλαίσιο (border)
• ο κενός χώρος μεταξύ του περιεχομένου του στοιχείου και του πλαισίου του (padding)

Η w3.org, η οποία ανέπτυξε και διαχειρίζεται τα πρότυπα της CSS και της HTML, ομαδοποίησε αυτές τις ιδιότητες χρησιμοποιώντας τον ορισμό Box model, ο οποίος απεικονίζεται παρακάτω:

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

Είναι σημαντικό να κατανοήσουμε ότι όταν ορίζουμε τις διαστάσεις ενός στοιχείου με css, στην ουσία ορίζουμε τις διαστάσεις της περιοχής του περιεχομένου, χωρίς να υπολογίζονται οι περιοχές των padding, margin και border. Για παράδειγμα στο παρακάτω στυλ ορίζουμε το μήκος, το ύψος και το πλαίσιο ενός div, καθώς και τις τιμές padding και margin του div (μην ανησυχείτε αν δεν καταλάβετε κάποια από τις ιδιότητες του παρακάτω στυλ, καθώς θα τις δούμε αναλυτικά σε επόμενες ενότητες):

Το πραγματικό μήκος του στοιχείου είναι:
width = 340px +
5px (αριστερό πλαίσιο) +
5px (δεξί πλαίσιο) +
15px (αριστερό padding) +
15px (δεξί padding) +
20px (αριστερό margin) +
20px (δεξί margin) = 420px

Ενώ το πραγματικό ύψος του ίδιου στοιχείου είναι:
height = 55px +
5px (πάνω πλαίσιο) +
5px (κάτω πλαίσιο) +
15px (πάνω padding) +
15px (κάτω padding) +
20px (πάνω margin) +
20px (κάτω margin) = 135px

Γενικά, για να υπολογίσουμε το πραγματικό μήκος (width) ενός στοιχείου χρησιμοποιούμε τον παρακάτω τύπο:
width = width + αριστερό padding + δεξί padding + αριστερό border + δεξί border + αριστερό margin + δεξί margin

ενώ για να υπολογίσουμε το πραγματικό ύψος (height) ενός στοιχείου χρησιμοποιούμε τον παρακάτω τύπο:
height = height + πάνω padding + κάτω padding + πάνω border + κάτω border + πάνω margin + κάτω margin

Σε επόμενη ενότητα θα δούμε πως ορίζουμε διαφορετικά μεγέθη για τις τέσσερεις πλευρές των ιδιοτήτων (δηλαδή, padding-left, padding-bottom, border-right, margin-top κτλ.)

Το παραπάνω παράδειγμα δεν δουλεύει σωστά στον Internet Explorer 8 και σε παλαιότερες εκδόσεις του ίδιου browser. Για να αποφύγετε το πρόβλημα ασυμβατότητας θα πρέπει να προσθέσετε στην κορυφή του html αρχείου σας την ετικέτα doctype όπως φαίνεται στο παράδειγμα:

Γειτνίαση δύο παραγράφων
Σε αυτό το παράδειγμα θα δούμε πως η τιμή padding επηρεάζει την απόσταση μεταξύ δύο παραγράφων. Προσπαθήστε να παίξετε με την τιμή του padding, αλλά και να προσθέσετε την ιδιότητα margin στο στυλ.