CSSте padding тармагы менен иштөө

Биз сиз менен чектен сырткары аралыкты түзгөн margin касиетин карап чыктык. Ошондой эле padding деген өтө окшош касиет бар, ал чектен ичкери аралыкты түзөт.

Келгиле, азыр бул касиет кантип иштешин мисалдар менен көрөлү. Башында аралыксыз блокту келтирем (анын тексти чектерге жабышып калган):

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

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

Результат:

Эми бардык тараптарга 30px padding коёлу:

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

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

Результат: