Στα CSS όλα τα στοιχεία μπορούν να θεωρηθούν πως είναι κουτιά. Το CSS Box Model λοιπόν είναι ουσιαστικά ένα κουτί το οποίο “τυλίγει” το HTML περιεχόμενο της σελίδας μας. Η χρήση του μας διευκολύνει στην τοποθέτηση διαφόρων στοιχείων σε σχέση με τα υπόλοιπα στοιχεία μέσα στην σελίδα μας.

Δομικά Στοιχεία του Box Model

To Box Model αποτελείται από το Περιεχόμενο που βρίσκεται μέσα του, από το Padding από το Border και από το Margin. Ας δούμε πρώτα σε ένα γράφιμα το πώς είναι δομημένο το Box Model και στην συνέχεια θα εξηγήσουμε τις διάφορες ιδιότητες που μπορεί να πάρει.

Περιεχόμενο : Το περιεχόμενο είναι το HTML κομμάτι της σελίδας μας που περιέχεται μέσα σε κάθε Box.
Padding : Το Padding είναι η απόσταση που θέλουμε να δώσουμε στο εσωτερικό του κουτιού μας, δηλαδή ανάμεσα στο περίγραμμα του και το περιεχόμενο του.

Border : Το Border είναι το περίγραμμα που θέλουμε να δώσουμε στο κουτί μας.

Margin : Τέλος το Margin είναι η απόσταση που θέλουμε να δώσουμε στο κουτί μας από τα υπόλοιπα κουτιά στην σελίδα μας.

Ύψος και Πλάτος

Όταν έχουμε να κάνουμε με Boxes, μπορούμε να ορίσουμε το ύψος ή και το πλάτος που θέλουμε να έχει το στοιχείο μας. Προσοχή όμως, το ύψος και το πλάτος που θα ορίσουμε θα ορίσει το ύψος και το πλάτος του περιεχομένου μας και όχι των άλλως ιδιοτήτων (margin,padding,border.)

Μορφοποίηση του Box Model

Ας δούμε ένα παράδειγμα μορφοποίησης ενός Box

Έστω ότι έχουμε τον εξής HTML κώδικα

<div class="testbox">
<p>This is a paragraph inside a box</p>
</div>

Ας δούμε τι ιδιότητες μπορούμε να ορίσουμε στο box μας

.testbox { margin:5px 2px 5px 2px; padding: 4px; border:1px solid #c9c9c9; height:250px; width:400px; }

Με τις παραπάνω ιδιότητες, το περιεχόμενο μας θα έχει ύψος 250pixels και πλάτος 400 pixels. Το περίγραμμα(border) θα είναι πάχους 1pixel σε όλες τις πλευρές ενώ το περιεχόμενο θα απέχει από το περίγραμμα 4 pixels (padding) σε όλες τις πλευρές. Τέλος το κουτί μας θα απέχει(margin) από τα υπόλοιπα στοιχεία τις σελίδας μας 5pixels από πάνω και από κάτω, και 2pixels από αριστερά και δεξιά.

Στο επόμενο μέρος…

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