Kitöltés - padding

A box modellből a 3. számmal jelölt terület ismertetése történik meg most. A keret és a tartalom (ez maga az HTML elem) közti távolságot szabályozhatjuk a kitöltések segítségével. A magam részéről a belső margó kifejezést jobbnak gondolom, mint a kitöltést.
A belső margók negatív értéket nem vehetnek fel!
A kitöltés értékét négy féleképpen adhatjuk meg (a szokásos módon):

Érték	Jelentés
Egy értéket adunk meg	Mind a négy távolság a megadott értéket kapja
Két értéket adunk meg	Az első érték a felső és alsó távolságra, a második a bal és a jobb oldali távolságra vonatkozik
Három értéket adunk meg	Az első érték a felső, a második a két oldalsó, a harmadik az alsó távolságra vonatkozik
Négy értéket adunk meg	Felső, jobb, alsó és bal oldali távolságokra vonatkozik, a felsorolás sorrendjében.

Példák:

p { padding: 0px 50px 20px 80px; border:thin solid #00F;}

A példában felül 0, jobbra 50, alul 20 és bal oldalt 80 képpontnyi belső margót állítunk be a bekezdésnek. Ezt a megadási formát shorthand (gyorsírásos) megadásnak is nevezik (O'Reilly kiadó Eric A Meyer: CSS zsebkönyv).

Egy érték megadása esetén:
p { padding: 50px; border:thin solid #00F;}

Ebben az esetben -a jól láthatóság miatt választottam ekkora értéket- mind a négy belső margó értéke 50 pixel lesz.

Két érték megadása esetén:
p { padding: 0px 50px; border:thin solid #00F;}

Ebben az esetben -a jól láthatóság miatt választottam ekkora értéket- a felső és alsó belső margó 0 pixel nagyságú, a két oldalsó belső margó 50 képpontnyi lesz.

Három érték megadása esetén:
p { padding: 0px 50px 30px; border:thin solid #00F;}

Ebben az esetben -a jól láthatóság miatt választottam ekkora értéket- a felső belső margó 0 pixel nagyságú, a két oldalsó belső margó 50 képpontnyi, míg az alsó belső margó 30 px lesz.

Ha valakit zavar a sorrend vagy csak konkrét oldalt szeretne beállítani, akkor külön-külön is meghatározhatja az oldalak értékét.
p {
  padding-left: 80px;
  padding-top: 0px;
  padding-right: 50px;
  padding-bottom: 20px;
}

Ezzel a beállítással ugyanazt az eredményt kapjuk, mint az első példánál. Felül 0, jobbra 50, alul 20 és bal oldalt 80 képpontnyi belső margót állítunk be a bekezdésnek. Gyakori használata, ha csak egy-két belső margót szeretnénk beállítani.

ugrás a lap tetejére