Η ιδιότητα box-sizing

Η ιδιότητα box-sizing επιτρέπει την αλλαγή του τρόπου υπολογισμού των διαστάσεων ενός στοιχείου.

Από προεπιλογή, η προσθήκη padding διευρύνει το στοιχείο: εάν ορίσουμε πλάτος width 100px και padding-left σε 20px, τότε το πραγματικό πλάτος του στοιχείου θα είναι 120px.

Και αν ορίσουμε επίσης και border-left σε 10px, τότε το πραγματικό πλάτος του στοιχείου θα γίνει 130px. Δηλαδή, το padding και το border διευρύνουν το μπλοκ (και σε πλάτος, και σε ύψος). Αυτή η συμπεριφορά μπορεί να αλλάξει με τη βοήθεια του box-sizing.

Σύνταξη

επιλογέας {
	box-sizing: content-box | border-box;
}

Τιμές

Τιμή	Περιγραφή
`content-box`	Και το `padding`, και το `border` διευρύνουν το μπλοκ.
`border-box`	Ούτε το `padding`, ούτε το `border` διευρύνουν το μπλοκ.

Προεπιλεγμένη τιμή: content-box.

Παράδειγμα . Τυπική συμπεριφορά

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

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Παράδειγμα . Τυπική συμπεριφορά

Αυτή τη στιγμή και τα δύο μπλοκ έχουν το ίδιο ύψος και πλάτος, ωστόσο στο δεύτερο μπλοκ έχει οριστεί περίγραμμα σε 10px, ενώ στο πρώτο - όχι. Δείτε, πώς διαφέρουν τα μεγέθη τους:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Παράδειγμα . Τυπική συμπεριφορά

Αυτή τη στιγμή το δεύτερο μπλοκ έχει και padding, και περίγραμμα σε 10px:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Παράδειγμα . Τιμή border-box

Προσθέτουμε στο δεύτερο στοιχείο την τιμή border-box για την ιδιότητα box-sizing. Τώρα τα μεγέθη και του πρώτου και του δεύτερου στοιχείου θα γίνουν ίδια:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Δείτε επίσης

η ιδιότητα outline,
που δημιουργεί ένα περίγραμμα που δεν διευρύνει το στοιχείο