CSS-da turli tomonlar uchun padding chekinishlari

Ichki chekinishlar uchun ham, tashqi chekinishlar kabi, alohida tomonlar uchun xususiyatlar mavjud: padding-left, padding-right, padding-top va padding-bottom. Keling, ularning ishlashini ko'rib chiqaylik:

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

css#elem {
  padding-top:    10px; /* yuqoridan */
  padding-right:  20px; /* o'ngdan */
  padding-bottom: 30px; /* pastdan */
  padding-left:   40px; /* chapdan */
  
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: