Επέκταση Στοιχείων στο CSS για JavaScript

Ο καθορισμός των CSS ιδιοτήτων width και height δην εγγυάται ότι το στοιχείο θα πάρει το καθορισμένο μέγεθος. Ας δούμε σε παραδείγματα.

Παράδειγμα

Αυτή τη στιγμή τα μεγέθη του στοιχείου συμπίπτουν με τα καθορισμένα:

<div id="elem">
	κείμενο
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Παράδειγμα

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

<div id="elem">
	κείμενο
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Παράδειγμα

Η παρουσία του περιγράμματος επεκτείνει επίσης το στοιχείο:

<div id="elem">
	κείμενο
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Παράδειγμα

Η ιδιότητα box-sizing επιτρέπει την αλλαγή της παραπάνω συμπεριφοράς. Μπορείτε να κάνετε έτσι ώστε ούτε το εσωτερικό περιθώριο, ούτε το περίγραμμα να επεκτείνουν το στοιχείο. Για αυτό, σε αυτή την ιδιότητα πρέπει να οριστεί η τιμή border-box:

<div id="elem">
	κείμενο
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Η σημασία των παραπάνω

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