padding
Ustawia wewnętrzny odstęp między treścią a obramowaniem.
- Wartość domyślna
0- Dziedziczona
- Nie
- Animowalna
- tak, jako długość
- Dotyczy
- wszystkie elementy poza wewnętrznymi elementami tabel (oprócz komórek)
- JavaScript
element.style.padding = "12px 20px"
Przykład
#.alert {
padding: 12px 16px;
border-radius: 10px;
background: #1e1533;
}<p class="alert">Twoja seria trwa już 7 dni. Tak trzymaj!</p>Definicja i zastosowanie
#Właściwość padding to skrót dla czterech odstępów wewnętrznych: górnego, prawego, dolnego i lewego. Padding leży wewnątrz obramowania i przyjmuje kolor tła elementu, dlatego sprawia, że przycisk czy karta „oddychają”.
Kolejność wartości jest taka sama jak w margin: jedna dla wszystkich stron, dwie dla pionu i poziomu, cztery zgodnie z ruchem wskazówek zegara od góry. W przeciwieństwie do marginesu padding nie może być ujemny.
Procentowy padding liczy się zawsze od szerokości rodzica, także w pionie. Dawniej wykorzystywano to do zachowania proporcji elementów, dziś wygodniej robi się to przez aspect-ratio.
Składnia
#padding: <góra> <prawa>? <dół>? <lewa>?;Wartości
#- Tekst dotyka krawędzi tła.
<długość>
Równy odstęp wewnętrzny z każdej strony.pion poziom
Typowy przycisk: mniej w pionie, więcej w poziomie.cztery wartości
Góra, prawa, dół, lewa, zgodnie z ruchem wskazówek zegara.
Wartości w praktyce
#0
.demo { padding: 0; }12px
.demo { padding: 12px; }8px 24px
.demo { padding: 8px 24px; }4px 8px 20px 32px
.demo { padding: 4px 8px 20px 32px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przy
box-sizing: content-boxpadding powiększa element ponadwidth. Zborder-boxmieści się w podanej szerokości. - Klikalne elementy potrzebują wystarczającego paddingu. Obszar dotyku na telefonie powinien mieć co najmniej około 44px.
Powiązane hasła
#- marginUstawia zewnętrzny odstęp elementu od sąsiadów.
- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- box-sizingDecyduje, czy width i height obejmują padding i obramowanie.
- widthUstawia szerokość elementu.
- padding-inlineUstawia odstęp wewnętrzny na początku i końcu wiersza. Logiczna wersja padding-left i padding-right, która rozumie kierunek pisma.
Widzisz błąd albo brakuje przykładu? Napisz do nas.