A padding tulajdonság
A padding tulajdonság egy elem belső
margóját állítja be. A tulajdonság értéke
bármilyen mértékegység
a méretekhez lehet. Alapértelmezetten minden böngésző
különböző margókat adhat az elemekhez.
A tulajdonság a
padding-top,
padding-right,
padding-bottom,
padding-left
tulajdonságok rövidítése.
Szintaxis
szelektor {
padding: érték;
}
Paraméterek száma
A padding tulajdonság 1,
2, 3 vagy 4 értéket fogad el,
szóközzel elválasztva:
| Szám | Leírás |
|---|---|
1 |
Egy érték minden oldalról beállítja az elem margóját. |
2 |
Az első érték a felső és az alsó margót állítja be, a második pedig a jobb és a bal oldalit. |
3 |
Az első érték a felső margót állítja be, a második a jobb és bal oldalit, a harmadik pedig az alsót. |
4 |
Az első érték a felső margót állítja be, a második a jobb oldalit, a harmadik az alsót, a negyedik pedig a bal oldalit. |
Példa
Ebben az esetben alapértelmezetten a belső margó nulla lesz, és a szöveg a blokk széléhez lesz simulva:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Példa
Most pedig állítsuk be a belső margót
30px-ra:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Példa
Most a felső és alsó margó 20px,
a jobb és bal oldali pedig 5px lesz:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Példa
Most a felső margó 5px, a jobb oldali -
15px, az alsó - 25px, a bal oldali -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Lásd még
-
a
margintulajdonság,
amely a külső margót állítja be