Εργασία με τα περιθώρια padding στο CSS

Ας υποθέσουμε ότι έχουμε ορίσει πλάτος 100px σε ένα στοιχείο. Στο CSS, αυτό δεν σημαίνει απαραίτητα ότι το στοιχείο θα έχει πραγματικά πλάτος 100px. Το γεγονός είναι ότι η προσθήκη padding διευρύνει το στοιχείο και γίνεται μεγαλύτερο από αυτό που καθορίζεται στην ιδιότητα width.

Ας δούμε ένα παράδειγμα. Ας φτιάξουμε δύο μπλοκ στα οποία θα ορίσουμε πλάτος 100 pixels. Ταυτόχρονα, θα ορίσουμε padding στο δεύτερο μπλοκ, ενώ στο πρώτο - όχι. Ως αποτέλεσμα, το δεύτερο μπλοκ θα είναι μεγαλύτερο κατά το μέγεθος του περιθωρίου:

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

#elem1 {
	width: 100px;
	height: 100px;
	background: #f1f1f1;
	margin-bottom: 20px;
}

#elem2 {
	padding: 25px; /* ορίζουμε περιθώρια */
	width: 100px;
	height: 100px;
	background: #f1f1f1;
}