Własność CSS padding-block

Własność CSS padding-block to własność zbiorcza CSS służąca do ustawiania szerokości początkowego i końcowego dopełnienia logicznego w orientacji blokowej. Jest to własność niedziedziczona. Obejmuje ona dwie indywidualne własności logicznego dopełnienia blokowego:

• padding-block-start
• padding-block-end

Ustawienia własności padding-block są odwzorowywane na odpowiednie 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.) wartości tej własności odpowiadają ustawieniom padding-top i padding-bottom, np.:

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

W tym przykładzie zdefiniowaliśmy logiczne dopełnienie blokowe 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 na górze (padding-top, logiczny początek elementu) i na dole (padding-bottom, logiczny koniec elementu).

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

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

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-left i padding-right.

Obsługiwane wartości

Typy wartości przyjmowane przez własność padding-block:

• 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-block można mieszać różne typy wartości, a więc poniższa deklaracja, choć niezbyt rozsądna, jest prawidłowa:

padding-block: 20px 14mm;

Wartość początkowa własności padding-block to 0.

Składnia

Własność padding-block 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-block-start i padding-block-end, np.:

padding-block: 10px;

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.

padding-block: 10px 20px;

Ten zapis jest równoważny z poniższym:

padding-block-start: 10px;
padding-block-end: 20px;

Zastosowanie

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