Работа со padding во CSS

Ние го разгледавме својството margin, кое создава надворешно растојание од границата. Постои и многу слично својство padding, кое создава внатрешно растојание од границата.

Ајде сега да погледнеме како функционира ова својство преку примери. За почеток, еве блок без padding (текстот е залепен за границите):

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

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

Результат:

А сега да поставиме padding од 30px за сите страни:

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

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

Результат: