☰

The box model

Για τα css κάθε ετικέτα τύπου μπλοκ μπορεί να θεωρηθεί ένα ορθογώνιο (box) του οποίου οι διαστάσεις αλλά και τα υπόλοιπα χαρακτηριστικά μπορούν να οριστούν μέσω css.

Έτσι, κάθε ορθογώνιο (box) μπορεί να έχει τα εξής χαρακτηριστικά:

width (Πλάτος)
height (Ύψος)
border (Περίγραμμα)
background-color (Χρώμα φόντου)
color (Χρώμα κειμένου)
background-image (Εικόνα φόντου)
padding (Εσωτερικό περιθώριο)
margin (Εξωτερικό περιθώριο)
display (Εμφάνιση)
transparency (Διαφάνεια)
position (Θέση)

Αν προσθέσετε περιθώρια και περίγραμμα σε μια ετικέτα, τότε η επιφάνεια που δεσμεύει η ετικέτα αυξάνεται.

Αν για παράδειγμα, σε μια ετικέτα με πλάτος = 200px και ύψος = 100px, προστεθεί περίγραμμα με πάχος περιγράμματος = 5px, τότε οι διαστάσεις της ετικέτες (μαζί με το περίγραμμα) θα αυξηθούν σε πλάτος = 210px και ύψος = 110px. Το ίδιο ισχύει και για τα padding.

Αν δεν έχει οριστεί πλάτος και ύψος για την ετικέτα, τότε το πλάτος εκτείνεται σε όλο το μήκος του προγράμματος περιήγησης ή στο πλάτος του γονικού στοιχείου, ενώ το ύψος εξαρτάται από το περιεχόμενο της ετικέτας. Αυτό ισχύει για ετικέτες τύπου block.

Για να περιορίσετε τις διαστάσεις του box στις αρχικές τιμές πρέπει να χρησιμοποιήσετε την ιδιότητα: box-sizing: border-box;.

Με αυτό τον τρόπο το padding και border δεν αυξάνουν τις διαστάσεις του box. Άρα ο συνολικός χώρος (μαζί με border και padding) θα είναι για το παράδειγμά μας 200px x 100px.