CSS да паддинг (padding) оралиги билан ишлаш

Биз сиз билан чегарадан ташқари томонга оралик ҳосил қиладиган margin хусусиятини кўриб чиқдик. Шунингдек, чегарадан ички томонга оралик ҳосил қиладиган ужшаш 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;
}

Результат: