Dokumentacja CSS z przykładami: Padding

Q: W jakiej kolejności są wartości w skrócie padding?

Zgodnie z ruchem wskazówek zegara od góry: padding: top right bottom left;. Przy trzech wartościach to góra, lewo i prawo, dół; przy dwóch góra i dół, potem lewo i prawo; przy jednej wszystkie cztery strony.

Q: Czy padding zwiększa rozmiar elementu?

Przy domyślnym box-sizing: content-box tak: padding dodaje się do width i height. Przy box-sizing: border-box padding jest zabierany z wnętrza szerokości, więc element zachowuje ustawiony rozmiar.

Q: Jak dodać padding w HTML?

Przez CSS, w arkuszu stylów albo w atrybucie style: . HTML nie ma atrybutu padding dla zwykłych elementów; stary atrybut cellpadding w tabelach jest przestarzały i zastąpiło go padding na td i th.

Czym jest padding

Padding to przestrzeń wewnątrz elementu, między jego treścią a obramowaniem. Przejmuje tło elementu, więc to właśnie ta właściwość daje przyciskowi, karcie czy plakietce miejsce na oddech.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

Niebieski obszar to treść. Zielony pas wokół niej to 24px paddingu z każdej strony, a obramowanie jest na zewnątrz niego.

Skrót padding: 1, 2, 3 lub 4 wartości

padding ustawia wszystkie cztery strony w jednej deklaracji. Liczba wartości decyduje, która strona dostaje którą, zgodnie z ruchem wskazówek zegara od góry:

Deklaracja	Góra	Prawo	Dół	Lewo
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Dwie wartości oznaczają "pion, poziom". Trzy wartości oznaczają "góra, poziom, dół". Cztery idą dookoła zegara: góra, prawo, dół, lewo (po angielsku popularna mnemotechnika to TRouBLe).

Wpisz poniżej dowolny skrót. Pudełko narysuje się na nowo, a przeglądarka poda, co dostała każda strona:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj 8px, 8px 24px, 0 0 40px i 1em 5%. Nieprawidłowa wartość, na przykład -10px, jest ignorowana, a pudełko zachowuje ostatni poprawny padding.

Jedna strona naraz

Każda strona ma własną właściwość, co jest czytelniejsze niż skrót z czterema wartościami, gdy chcesz zmienić tylko jedną:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Skrót, po którym następuje jedna strona, to częsty wzorzec: ustaw wszystko, a potem popraw jedną stronę.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Kolejność ma tu znaczenie: skrót padding zapisany po padding-bottom przywróciłby dolny padding do 16px.

Logiczny padding: padding-inline i padding-block

padding-left i padding-right są fizyczne: w każdym języku zostają po tej samej stronie. Właściwości logiczne podążają za kierunkiem pisma, i właśnie tego potrzebujesz na stronie, która jest wyświetlana także od prawej do lewej:

Właściwość logiczna	Po polsku (od lewej do prawej)	Po arabsku (od prawej do lewej)
`padding-inline-start`	lewo	prawo
`padding-inline-end`	prawo	lewo
`padding-inline`	lewo i prawo	prawo i lewo
`padding-block`	góra i dół	góra i dół

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding powiększa pudełko (chyba że border-box)

Domyślnie width to szerokość samej treści, a padding dodaje się do niej. Pudełko z width: 200px i padding: 20px ma 240px szerokości:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box utrzymuje pudełko przy 200px i zabiera padding z jego wnętrza. Strona o modelu pudełkowym omawia pełne obliczenia.

Padding w procentach

Padding w procentach jest mierzony względem szerokości rodzica, na wszystkich czterech stronach, łącznie z górą i dołem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

Stąd wziął się stary trik "padding-top: 56.25%" dla pudełek wideo 16:9. Dziś aspect-ratio: 16 / 9 robi to samo bezpośrednio.

Padding na przyciskach i linkach

Padding to właściwy sposób na powiększenie linku lub przycisku, bo padding jest częścią elementu, a więc częścią tego, co można kliknąć lub dotknąć. Margin dodałby przestrzeń, ale nie większy cel.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Wartości, które przyjmuje padding

Wartość	Przykład	Uwagi
Długość	`12px`, `1rem`, `0.5em`	`em` skaluje się z rozmiarem czcionki elementu
Procent	`5%`	Szerokości bloku zawierającego
`0`	`padding: 0`	Jednostka niepotrzebna
Ujemna	`-10px`	Nieprawidłowa, ignorowana
`auto`	`auto`	Nieprawidłowa dla padding (działa dla margin)

Częste błędy

Zła kolejność w skrócie z czterema wartościami. To góra, prawo, dół, lewo, zgodnie z ruchem wskazówek zegara.
Pudełko, które rośnie po dodaniu paddingu. Ustaw box-sizing: border-box.
Używanie paddingu do oddzielenia dwóch elementów. Przestrzeń między elementami to margin; padding to przestrzeń wewnątrz jednego. Zobacz margin a padding.
Pionowy padding na linku liniowym, który zachodzi na inne linie. Nadaj mu inline-block.
Ujemny padding albo padding: auto. Oba są nieprawidłowe i po cichu ignorowane.

Najczęściej zadawane pytania

Czym jest padding w CSS?

Padding to przestrzeń między treścią elementu a jego obramowaniem. Jest częścią elementu, więc pokazuje jego kolor tła i powiększa klikalny obszar linku lub przycisku.

W jakiej kolejności są wartości w skrócie padding?

Zgodnie z ruchem wskazówek zegara od góry: padding: top right bottom left;. Przy trzech wartościach to góra, lewo i prawo, dół; przy dwóch góra i dół, potem lewo i prawo; przy jednej wszystkie cztery strony.

Czy padding zwiększa rozmiar elementu?

Przy domyślnym box-sizing: content-box tak: padding dodaje się do width i height. Przy box-sizing: border-box padding jest zabierany z wnętrza szerokości, więc element zachowuje ustawiony rozmiar.

Względem czego liczy się padding w procentach?

Względem szerokości bloku zawierającego, dla wszystkich czterech stron. padding-top: 50% to połowa szerokości rodzica, a nie jego wysokości, i dlatego stare triki z proporcjami używały pionowego paddingu.

Czy padding może być ujemny?

Nie. Ujemna wartość padding jest nieprawidłowa, a deklaracja zostaje zignorowana. Żeby wysunąć treść na zewnątrz, użyj zamiast tego ujemnego marginesu.

Jak dodać padding w HTML?

Przez CSS, w arkuszu stylów albo w atrybucie style: <div style="padding: 16px;">. HTML nie ma atrybutu padding dla zwykłych elementów; stary atrybut cellpadding w tabelach jest przestarzały i zastąpiło go padding na td i th.

Powiązane zagadnienia