Werken met padding in CSS

We hebben de eigenschap margin besproken, die een naar buiten gerichte marge maakt vanaf de rand. Er is ook een zeer vergelijkbare eigenschap padding, die een naar binnen gerichte marge maakt vanaf de rand.

Laten we nu aan de hand van voorbeelden bekijken hoe deze eigenschap werkt. Om te beginnen toon ik een blok zonder marges (de tekst zit tegen de randen aan):

html<div id="elem">
  some long text
</div>

css#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

En laten we nu padding instellen op 30px voor alle kanten:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: