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;
}

Результат: