Egenskaben padding

Egenskaben padding indstiller den indre afstand af et element. Værdien for egenskaben er enhver enhed for størrelser. Som standard kan enhver browser tilføje elementer forskellige afstande. Egenskaben er en forkortelse for egenskaberne padding-top, padding-right, padding-bottom, padding-left.

Syntaks

cssselektor {
  padding: værdi;
}

Egenskaben padding accepterer 1, 2, 3 eller 4 værdier, opremset med mellemrum:

Antal	Beskrivelse
`1`	Én værdi angiver afstand på alle sider af elementet.
`2`	Første værdi angiver afstand ovenfor og nedenfor, og anden - til højre og venstre.
`3`	Første værdi angiver afstand ovenfor, anden - til højre og venstre, og tredje - nedenfor.
`4`	Første værdi angiver afstand ovenfor, anden - til højre, tredje - nedenfor, og fjerde - til venstre.

I dette tilfælde vil den indre afstand som standard være nul, og teksten vil være presset op til blokkens grænse:

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

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

Результат:

Og lad os nu lave en indre afstand på 30px:

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

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

Результат:

Nu vil afstanden ovenfor og nedenfor være 20px, og til højre og venstre - 5px:

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

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Nu er afstanden ovenfor 5px, til højre - 15px, nedenfor - 25px, til venstre - 35px:

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

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат: