Werken met padding in CSS
Stel dat we een element een breedte hebben gegeven van
100px. In CSS betekent dit geenszins
dat het element daadwerkelijk een breedte van
100px zal hebben. Het zit zo dat het toevoegen van
padding het element uitbreidt en het wordt
groter dan gespecificeerd in de eigenschap width.
Laten we een voorbeeld bekijken. We maken twee
blokken, waaraan we een breedte van 100
pixels geven. Tegelijkertijd geven we het tweede blok
padding, en het eerste niet. Als gevolg
zal het tweede blok groter zijn met de grootte van de padding:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* stel padding in */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
