CSS:n padding-marginaalien käsittely

Olemme käsitelleet margin-ominaisuutta, joka luo marginaalin ulospäin rajasta. On olemassa myös hyvin samankaltainen ominaisuus padding, joka luo marginaalin sisäänpäin rajasta.

Katsotaan nyt esimerkkien avulla, kuinka tämä ominaisuus toimii. Aluksi esitän lohkon ilman marginaaleja (sen teksti on kiinni rajoissa):

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

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

Результат:

Ja nyt asetetaan padding arvoon 30px kaikille sivuille:

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

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

Результат: