CSS padding használata (CSS padding magyarul)

A CSS padding sok tulajdonságában megegyezik a margóval, magyarul belső margónak is szokták hívni, de az angol padding neve terjedt el igazán nálunk is. A CSS padding tulajdonképpen egy teret képez az elem körül a kereten (border) belül. Ezért hívják belső margónak.

Csak úgy, mint a margó esetében, itt is lehetőségünk van mind a négy oldalt külön-külön és egybe is beállítani.

Padding oldalanként

A négy oldalra az angol megfelelőjével hivatkozhatunk úgy, hogy elé pakoljuk a „padding-” szót. Pontosan így:

• padding-top
• padding-right
• padding-bottom
• padding-left

A padding értékét szokás szerint megadhatjuk pixelben és százalékban is. (További megoldások is vannak.) A margóval ellentétben itt nincs megengedve a negatív érték.

Szintaktika

padding-*: ÉRTÉK;
Code language: HTTP (http)

A * helyére a top, right, bottom és left értékek kerülhetnek.

Példa

p {
  padding-top: 50px;
  padding-bottom: 20px;
  padding-right: 70px;
  padding-left: 30px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Négy oldal meghatározása egyszerre

Ha szeretnénk egy picit gyorsabban haladni, akkor érdemes lehet egyetlen egy sorral megadni mind a négy oldal padding értékét.

Szinaktika

padding: JOBB FELSŐ ALSÓ BAL;
Code language: HTTP (http)

Ebben az esetben elég a padding szó után a következő sorrendben megadni a belső margó értékeit: jobb oldal, felső oldal, alsó oldal, bal oldal.

Példa

p {
  padding: 50px 20px 70px 30px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!