Własność CSS padding-inline-end ustawia szerokość logicznego dopełnienia końcowego w orientacji śródliniowej. Jest to własność niedziedziczona.
Ustawienie własności padding-inline-end
jest odwzorowywane na odpowiednią własność fizyczną 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.) ta własność odpowiada własności padding-right
, np.:
div {
padding-inline-end: 20px;
background-color: lightpink;
width: 200px;
writing-mode: horizontal-tb;
}
p {
background-color: coral;
}
...
<div><pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</pgt;</divgt;
W tym przykładzie zdefiniowaliśmy końcowe logiczne dopełnienie śródliniowe o szerokości 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 prawej stronie, ponieważ to jest logiczny koniec elementu w orientacji śródliniowej, i odpowiada mu własność padding-right
.
A teraz tę samą deklarację własności padding-inline-end
zastosujemy do tekstu pionowego, pisanego od prawej do lewej.
div {
padding-inline-end: 20px;
background-color: lightpink;
height: 100px;
writing-mode: vertical-rl;
}
p {
background-color: coral;
margin: 0;
padding: 0;
}
...
<divgt;<pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</pgt;</divgt;
Efekt:

W tym przypadku dopełnienie również zostało zastosowane na logicznym końcu, ale zmieniła się orientacja elementu i stąd też zmiana lokalizacji obszaru dopełnienia. Teraz własność padding-inline-end
odpowiada własności padding-bottom
.
Obsługiwane wartości
Typy wartości przyjmowane przez własność padding-inline-end
:
- 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.
Wartość początkowa własności padding-inline-end
to 0
.
Składnia
Własność padding-inline-end
przyjmuje jedną wartość określającą szerokość logicznego dopełnienia końcowego w orientacji śródliniowej, np.:
padding-inline-end: 10px;
W powyższym przykładzie końcowe dopełnienie śródliniowe będzie miało szerokość 10 pikseli.
Zastosowanie
Własność padding-inline-end
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 |
---|---|
Obsługiwane wartości |
|
Wartość początkowa | 0 |
Dziedziczenie | Nie |
Specyfikacja | CSS Logical Properties and Values Level 1 – padding-inline-end |