Práca s odsadením padding v CSS

Už sme si rozobrali vlastnosť margin, ktorá vytvára odsadenie smerom von od okraja. Existuje aj veľmi podobná vlastnosť padding, ktorá vytvára odsadenie smerom dovnútra od okraja.

Pozrime sa teraz na príkladoch, ako táto vlastnosť funguje. Na začiatok uvediem blok bez odsadenia (jeho text sa dotýka okrajov):

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

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

Результат:

A teraz nastavme padding na 30px pre všetky strany:

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

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

Результат: