Własność CSS padding-inline-end

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