CSS-da padding chekinmalari bilan ishlash

Biz siz bilan tashqi chegaradan tashqariga chekinma yaratadigan margin xususiyatini ko'rib chiqdik. Shuningdek, ichki chegaradan chekinma yaratadigan padding degan judayam o'xshash xususiyat mavjud.

Keling, endi misollar orqali bu xususiyat qanday ishlashini ko'ramiz. Boshlash uchun chekinmasiz blokni keltiraman (uning matni chegaralarga yopishgan):

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

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

Результат:

Endi barcha tomonlar uchun padding ni 30px ga o'rnatamiz:

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

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

Результат: