Własność CSS padding

Własność CSS padding to własność zbiorcza CSS służąca do ustawiania szerokości dopełnienia fizycznego z wszystkich czterech stron na raz. Jest to własność niedziedziczona, która obejmuje cztery indywidualne własności dopełnienia:

• padding-top
• padding-right
• padding-bottom
• padding-left

Przykład

W tym przykładzie element nav będzie miał dopełnienie o szerokości 10 pikseli z każdej strony:

nav {
  padding: 10px;
  width: 200px;
  background-color: lightpink;
}
...
<nav>Elementy nawigacyjne</nav>

Efekt:

Gdyby usunięto deklarację własności padding z powyższej reguły CSS, ten element wyglądałby tak:

Obsługiwane wartości

• Liczba z jednostką długości
• Procenty – wartości procentowe odnoszą się do szerokości (w przypadku dokumentów zawierających tekst w języku pisanym od lewej do prawej strony) nadrzędnego elementu blokowego, czyli zawierającego ten element, dla którego jest zdefiniowane dopełnienie.

W jednej deklaracji własności padding można mieszać różne typy wartości, a więc poniższa deklaracja, choć niezbyt rozsądna, jest prawidłowa:

padding: 10px 4mm 1% 7pc;

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

Składnia

Własność padding przyjmuje jedną, dwie, trzy lub cztery wartości. Jeśli wartości jest mniej niż cztery, to brakujące są uzupełniane automatycznie wg ściśle określonych zasad:

• Jedna wartość: jeśli zostanie zdefiniowana tylko jedna wartość, to zostanie ona zastosowana z wszystkich czterech stron, np.:

  padding: 10px;

  Dopełnienie z każdej strony będzie miało szerokość 10 pikseli. To samo, co:

  padding-top: 10px;
  padding-right: 10px;
  padding-bottm: 10px;
  padding-left: 10px;

• Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do dopełnienia górnego i dolnego, a druga – do dopełnienia lewego i prawego, np.:

  padding: 10px 20px;

  Górne i dolne dopełnienie będą mieć po 10 pikseli szerokości, a lewe i prawe: po 20 pikseli szerokości. To samo, co:

  padding-top: 10px;
  padding-right: 20px;
  padding-bottm: 10px;
  padding-left: 20px;

• Trzy wartości: jeśli są zdefiniowane trzy wartości, to pierwsza odnosi się do dopełnienia górnego, druga – do lewego i prawego, a trzecia – do dolnego.

  padding: 10px 15px 20px;

  Górne dopełnienie będzie miało 10 pikseli szerokości, lewe i prawe – po 15 pikseli szerokości, a dolne – 20 pikseli szerokości. To samo, co:

  padding-top: 10px;
  padding-right: 15px;
  padding-bottm: 20px;
  padding-left: 15px;

• Cztery wartości: jeśli są zdefiniowane cztery wartości, to odnoszą się po kolei do górnego, prawego, dolnego i lewego dopełnienia.

  padding: 5px 10px 15px 20px;

  Górne dopełnienie będzie miało 5, prawe – 10, dolne – 15, a lewe 20 pikseli szerokości. To samo, co:

  padding-top: 5px;
  padding-right: 10px;
  padding-bottm: 15px;
  padding-left: 20px;

Zastosowanie

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

Dodatkowo własność padding działa także w pseudoelementach ::first-letter i ::first-line.

Podsumowanie