Padding Eienskap

Die eienskap padding stel 'n element se binnekant-opvulling in. Die waarde van die eienskap kan enige eenheid vir groottes wees. Standaard kan enige blaaier verskillende opvullings by elemente voeg. Die eienskap is 'n afkorting vir die eienskappe padding-top, padding-right, padding-bottom, padding-left.

Sintaksis

cssselektor {
  padding: waarde;
}

Aantal Parameters

Die eienskap padding aanvaar 1, 2, 3 of 4 waardes, geskei deur spasies:

Aantal	Beskrywing
`1`	Een waarde stel die opvulling aan alle kante van die element in.
`2`	Die eerste waarde stel die opvulling bo en onder in, en die tweede - regs en links.
`3`	Die eerste waarde stel die opvulling bo in, die tweede - regs en links, en die derde - onder.
`4`	Die eerste waarde stel die opvulling bo in, die tweede - regs, die derde - onder, en die vierde - links.

Voorbeeld

In hierdie geval sal die binnekant-opvulling standaard nul wees en die teks sal teen die blok se grens gedruk wees:

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

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

Результат:

Voorbeeld

Laat ons nou die binnekant-opvulling op 30px stel:

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

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

Результат:

Voorbeeld

Nou sal die opvulling bo en onder 20px wees, en regs en links - 5px:

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

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

Результат:

Voorbeeld

Nou is die opvulling bo 5px, regs - 15px, onder - 25px, links - 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;
}

Результат:

Sien ook

die eienskap margin,
wat die buitekant-opvulling instel