Właściwość dopełnienia CSS
Przykład
Ustaw dopełnienie dla wszystkich czterech boków elementu <p> na 35 pikseli:
p {
padding: 35px;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Wypełnienie elementu to przestrzeń pomiędzy jego zawartością a jego obramowaniem.
Właściwość paddingjest skróconą własnością dla:
Uwaga: Dopełnienie tworzy dodatkową przestrzeń w elemencie, podczas gdy margines tworzy dodatkową przestrzeń wokół elementu.
Ta właściwość może mieć od jednej do czterech wartości.
Jeśli właściwość padding ma cztery wartości:
- padding:10px 5px 15px 20px;
- górna wyściółka to 10px
- prawe wypełnienie to 5px
- dolna wyściółka to 15px
- lewe wypełnienie to 20px
Jeśli właściwość padding ma trzy wartości:
- wypełnienie: 10px 5px 15px;
- górna wyściółka to 10px
- prawe i lewe wypełnienie to 5px
- dolna wyściółka to 15px
Jeśli właściwość padding ma dwie wartości:
- dopełnienie:10px 5px;
- górna i dolna wyściółka to 10px
- prawe i lewe wypełnienie to 5px
Jeśli właściwość padding ma jedną wartość:
- dopełnienie:10px;
- wszystkie cztery wypełnienia mają 10px
Uwaga: wartości ujemne nie są dozwolone.
| Domyślna wartość: | 0 |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | tak, zobacz poszczególne właściwości . Przeczytaj o animacji |
| Wersja: | CSS1 |
| Składnia JavaScript: | obiekt .style.padding="100px 20px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Składnia CSS
padding: length|initial|inherit;
Wartości nieruchomości
| Value | Description | Play it |
|---|---|---|
| length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
| % | Specifies the padding in percent of the width of the containing element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Ustaw dopełnienie elementu <p> na 35 pikseli dla góry i dołu oraz 70 pikseli dla prawej i lewej strony:
p {
padding: 35px 70px;
}
Przykład
Ustaw dopełnienie elementu <p> na 35 pikseli dla góry, 70 pikseli dla prawej i lewej strony oraz 50 pikseli dla dołu:
p {
padding: 35px 70px 50px;
}
Przykład
Ustaw dopełnienie elementu <p> na 35 pikseli dla góry, 70 pikseli dla prawej, 50 pikseli dla dołu i 90 pikseli dla lewej strony:
p {
padding: 35px 70px 50px 90px;
}
Powiązane strony
Samouczek CSS: dopełnienie CSS
Samouczek CSS: Model pudełkowy CSS
Dokumentacja HTML DOM: właściwość dopełniania