CSS Doboz modell - eltartás (padding)

A mai (a hét utolsó leckéjében) napon befejezzük a dobozz modell taglalásán és egyben elérkezünk a W3 Advanced szintjéhez. Mindenek előtt szeretném elmondani, hogy ha egyelőre nem érthető teljesen, hogy mi-miért van és hogyan működik, a gyakorló feladatokban biztos világos lesz.

Tehát az eltartás:
Az eltartás meghatároz egy területet a tartalom és a keret (border) között. Színe az elem háttérszínének felel meg. Tehát sok formázási lehetőségünk a méretén kívül nincs

elem{
padding:20px;
}


Lehetőségünk van a különböző oldalaknak külön eltartást beállítani:

elem{
padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;
}


Ilyenkor a felső eltartás 5px, a jobb 10px, az alsó 15px, a bal pedig 20px.

Rövidítés is a már megtanult módon történik:

elem{
padding: 5px 10px 15px 20px;
}


FONTOS:
Az összes doboz modell elemre érvényes a következő (úgy gondoltam, jobb, ha egyszerre tanuljuk meg)
Többféleképpen megadhatjuk a rövidítéseket.

• padding:25px 50px 75px 100px;
  • felső eltartás 25px
  • jobb eltartás 50px
  • alsó eltartás 75px
  • bal eltartás 100px
  
  
• padding:25px 50px 75px;
  • felső eltartás 25px
  • jobb és bal eltartás 50px
  • bottom padding is 75px
  
  
• padding:25px 50px;
  • alsó és felső eltartás 25px
  • bal és jobb eltartás 50px
  
  
• padding:25px;
• minden oldal eltartása 25px

Röviden: Ha csak egy értéket adunk meg, akkor az mindegyikre vonatkozik, ha kettőt akkor az első az alsó-felső-é lesz, a második a jobbé-balé, ha hármat, akkor az első a felső eltartásé lesz, a második a jobbé-balé, a harmadik pedig az alsóé, ha pedig négyet, akkor az óramutató járásával megegyező oldalaké.

Jövő héten nekiállunk az advanced résznek. Nem lesz olyan bonyolult, mint ahogy a neve sugallja.