Własność CSS padding-block-end

> Dodaj do ulubionych

Własność CSS padding-block-end ustawia szerokość końcowego dopełnienia logicznego w orientacji blokowej. Jest to własność niedziedziczona.

Ustawienie własności padding-block-end zostaje odwzorowane 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.) własność ta odpowiada własności padding-bottom, np.:

div {
  padding-block-end: 20px;
  background-color: lightpink;
  writing-mode: horizontal-tb;
}
...
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

W tym przykładzie końcowe logiczne dopełnienie blokowe będzie miało szerokość 20 pikseli (tekst jest pisany od góry o orientacji poziomej – jak w języku polskim). Efekt tego jest taki:

Efekt zastosowania własności CSS padding-block-end

Dopełnienie zostało zastosowane na dole, bo tam znajduje się logiczny początek elementu. W tym przypadku logiczna własność padding-block-end odpowiada fizycznej własności padding-bottom.

A teraz tę samą deklarację własności padding-block-end zastosujemy do tekstu pionowego, pisanego od prawej do lewej.

div {
  padding-block-end: 20px;
  background-color: lightpink;
  height: 100px;
  writing-mode: vertical-rl;
}
...
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Efekt:

Efekt zastosowania własności CSS padding-block-end do tekstu pionowego

W tym przypadku dopełnienie również zostało zastosowane na końcu bloku logicznego, ale zmieniła się orientacja tego bloku i stąd też zmiana lokalizacji dopełnienia. W tym przypadku logiczna własność padding-block-end odpowiada fizycznej własności padding-left.

Obsługiwane wartości

Typy wartości przyjmowane przez własność padding-block-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.

Składnia

Własność padding-block-end przyjmuje jedną wartość określającą szerokość końcowego logicznego dopełnienia blokowego:

padding-block-end: 10px;

W powyższym przykładzie dopełnienie końcowe w orientacji blokowej będzie miało szerokość 10 pikseli.

Zastosowanie

Własność padding-block-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

ZastosowanieWszystkie 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ątkowa0
DziedziczenieNie
SpecyfikacjaCSS Logical Properties and Values Level 1 – padding-block-end