Darbas su atitraukimais padding CSS

Mes su jumis išnagrinėjome savybę margin, kuri daro atitraukimą į išorę nuo sienelės. Taip pat egzistuoja labai panaši savybė padding, kuri daro atitraukimą į vidų nuo sienelės.

Dabar pažiūrėkime pavyzdžiais, kaip veikia ši savybė. Pirmiausia pateiksiu bloką be atitraukimų (jo tekstas priliptus prie sienelių):

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

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

Результат:

O dabar nustatykime padding į 30px visoms pusėms:

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

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

Результат: