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:

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

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

#elem2 {
  padding: 25px; /* stel padding in */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: