Właściwość padding
Właściwość padding ustawia wewnętrzny
odstęp elementu. Wartością właściwości są
dowolne jednostki
wymiarów. Domyślnie każda przeglądarka
może dodawać elementom różne odstępy.
Właściwość jest skrótem dla właściwości
padding-top,
padding-right,
padding-bottom,
padding-left.
Składnia
selektor {
padding: wartość;
}
Liczba parametrów
Właściwość padding przyjmuje 1,
2, 3 lub 4 wartości,
wymieniane przez spację:
| Liczba | Opis |
|---|---|
1 |
Jedna wartość ustawia odstęp ze wszystkich stron elementu. |
2 |
Pierwsza wartość ustawia odstęp od góry i dołu, a druga - od prawej i lewej. |
3 |
Pierwsza wartość ustawia odstęp od góry, druga - od prawej i lewej, a trzecia - od dołu. |
4 |
Pierwsza wartość ustawia odstęp od góry, druga - od prawej, trzecia - od dołu, a czwarta - od lewej. |
Przykład
W tym przypadku domyślnie wewnętrzny odstęp będzie zerowy i tekst będzie dociśnięty do krawędzi bloku:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Przykład
A teraz zróbmy wewnętrzny odstęp
30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Przykład
Teraz odstęp od góry i dołu będzie 20px,
a od prawej i lewej - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Przykład
Teraz odstęp od góry 5px, od prawej -
15px, od dołu - 25px, od lewej -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Zobacz też
-
właściwość
margin,
która ustawia zewnętrzny odstęp