Lucrul cu padding-ul în CSS

Am analizat deja proprietatea margin, care creează un spațiu în afara marginii. Există și o proprietate foarte similară padding, care creează un spațiu în interiorul marginii.

Să vedem acum cum funcționează această proprietate cu exemple. Pentru început, iată un bloc fără spațiere (textul este lipit de margini):

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

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

Результат:

Și acum să setăm padding la 30px pentru toate părțile:

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

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

Результат: