Własność CSS padding-inline to własność zbiorcza służąca do ustawiania szerokości początkowego i końcowego logicznego dopełnienia w orientacji śródliniowej. Jest to własność niedziedziczona. Obejmuje ona dwie indywidualne własności logicznego dopełnienia śródliniowego:
Ustawienia własności padding-inline
są odwzorowywane na odpowiednie własności fizyczne dopełnienia zależnie od kierunku i orientacji pisma. W przypadku dokumentów w językach pisanych od lewej strony i od góry (takich jak polski, angielski itd.) wartości tej własności odpowiadają ustawieniom padding-right
i padding-left
, np.:
W tym przykładzie zdefiniowaliśmy logiczne dopełnienie śródliniowe z obu stron na 20 pikseli oraz ustawiliśmy kierunek pisma poziomego od góry do dołu (jak w języku polskim). Efekt tego jest taki:
Jak widać dopełnienie zostało zastosowane po lewej (padding-left
, logiczny początek elementu) i po prawej (padding-right, logiczny koniec elementu) stronie.
A teraz tę samą deklarację własności padding-inline
zastosujemy do tekstu pionowego, pisanego od prawej do lewej.
Efekt:
W tym przypadku dopełnienie również zostało zastosowane na logicznym początku i końcu, ale zmieniła się orientacja elementu i stąd też zmiana lokalizacji obszarów dopełnienia. Teraz pierwsza i druga wartość odpowiadają własnościom padding-top
i padding-bottom
.
Obsługiwane wartości
Typy wartości przyjmowane przez własność padding-inline
:
- Liczba z jednostką długości
- Procenty – wartości procentowe odnoszą się do szerokości lub wysokości (zależnie od kierunku i orientacji pisma) nadrzędnego elementu blokowego, czyli zawierającego ten element, dla którego jest zdefiniowane dopełnienie.
W jednej deklaracji własności padding-inline
można mieszać różne typy wartości, a więc poniższa deklaracja, choć niezbyt rozsądna, jest prawidłowa:
Wartość początkowa własności padding-inline
to 0
.
Składnia
Własność padding-inline
przyjmuje jedną lub dwie wartości. Jeśli jest jedna wartość, to zostaje ona zastosowana dla obu własności składowych. Jeśli wartości są dwie, to odnoszą się one odpowiednio do własności padding-inline-start
i padding-inline-end
, np.:
W powyższym przykładzie dopełnienie początkowe i końcowe będą miały szerokość po 10 pikseli. Natomiast w poniższym przykładzie dopełnienie początkowe będzie miało 10 pikseli szerokości, a końcowe – 20.
Ten zapis jest równoważny z poniższym:
Zastosowanie
Własność padding-inline
ma zastosowanie do wszystkich elementów z wyjątkiem wewnętrznych elementów tabeli, nie licząc komórek, a więc tych, które mają własność display
ustawioną na table-row-group
, table-header-group
, table-footer-group
, table-row
, table-column-group
lub table-column
. Standardowo zaliczają się do nich elementy tr
, th
, tfoot
, colgroup
, col
, thead
i tbody
.
Podsumowanie
Zastosowanie | Wszystkie elementy z wyjątkiem tych, które mają własność display ustawioną na table-row-group , table-header-group , table-footer-group , table-row , table-column-group lub table-column |
---|---|
Własności składowe | |
Obsługiwane wartości |
|
Wartość początkowa | 0 |
Dziedziczenie | Nie |
Specyfikacja | CSS Logical Properties and Values Level 1 – padding-inline |