paddingNieruchomość w CSS definiuje wewnętrznej części modelu pudełkowego, tworząc przestrzeń wokół zawartości pierwiastka, w środku żadnej określonych marginesów i / lub granicami.
Wartości wypełnienia są ustawiane przy użyciu długości lub procentów i nie mogą akceptować wartości ujemnych. Początkowa lub domyślna wartość wszystkich właściwości wypełnienia to 0.
Oto prosty przykład:
.box ( padding: 0 1.5em 0 1.5em; )W powyższym przykładzie użyto paddingshorthand właściwości, która akceptuje maksymalnie cztery wartości, pokazane poniżej:
.box ( padding: || || || )Jeśli ustawiono mniej niż cztery wartości, brakujące wartości są przyjmowane na podstawie zdefiniowanych. Na przykład następujące dwa zestawy reguł dałyby identyczne wyniki:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Tak więc, jeśli zdefiniowano tylko jedną wartość, ustawia to wszystkie cztery właściwości dopełnienia na tę samą wartość:
.box ( padding: 20px; )Jeśli zadeklarowano trzy wartości, tak jest padding: (top) (left-and-right) (bottom);.
Dowolną z właściwości dopełnienia można zadeklarować przy użyciu odręcznej, w takim przypadku należy zdefiniować tylko jedną wartość na właściwość. Zatem poprzedni przykład można przepisać w następujący sposób:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Obliczenia wypełnienia i szerokości elementu
Jeśli element ma określoną szerokość, wszelkie wypełnienie dodane do tego elementu doda się do całkowitej szerokości elementu. Jest to często niepożądany wynik, ponieważ wymaga ponownego obliczania szerokości elementu za każdym razem, gdy dopasowywane jest wypełnienie. (Zwróć uwagę, że dzieje się tak również w przypadku wysokości, ale w większości przypadków lepiej nie nadawać elementowi ustalonej wysokości).
Na przykład:
.box ( padding: 20px; width: 400px; )W tym przykładzie, chociaż .boxelementowi podano jawną szerokość 400 pikseli, rzeczywista wyrenderowana szerokość elementu na stronie wyniesie 440 pikseli. Uwzględnia to nie tylko szerokość 400px, ale także 20px wypełnienia z lewej strony i 20px z wypełnienia z prawej (zdefiniowane za pomocą skrótu dopełnienia w poprzednim przykładzie).
Dzieje się tak, aby zachować 400 pikseli przestrzeni zawartości zamiast 400 pikseli całkowitej szerokości elementu. Oto pióro, które to demonstruje:
Dzieje się tak we wszystkich używanych przeglądarkach, w trybie standardowym, ale nie wystąpi w IE6 i IE7 w trybie dziwactw (to znaczy na stronach wyświetlanych w IE6 lub IE7, na których nie ma zadeklarowanego typu dokumentu lub gdzie dzieje się coś innego, co wywołuje dziwactwa tryb).
Aby rozwiązać ten problem, zachowując w ten sposób szerokość 400 pikseli bez względu na stopień wypełnienia, możesz użyć box-sizingwłaściwości:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Powoduje to, że element zachowuje swoją szerokość, jednocześnie zwiększając wypełnienie, zmniejszając w ten sposób dostępną przestrzeń zawartości. Oto demonstracja:
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| tak | tak | tak | tak | tak | tak | tak |