Kurs HTML

Wprowadzenie: Wewnętrzny odstęp wokół treści

Właściwość padding w CSS służy do tworzenia **wewnętrznego odstępu** między obszarem treści (content area) elementu a jego obramowaniem (border). Jest to przezroczysty obszar, który "odsuwa" treść od krawędzi pudełka elementu.

Padding jest kluczowy dla poprawy czytelności i estetyki, zapobiegając "przyklejaniu się" tekstu lub innych treści do obramowania lub krawędzi kontenera.

Padding przyjmuje kolor tła (background-color) elementu.

Indywidualne właściwości padding-*

Można ustawić padding dla każdej strony elementu niezależnie, używając następujących właściwości:

• padding-top: Wypełnienie górne.
• padding-right: Wypełnienie prawe.
• padding-bottom: Wypełnienie dolne.
• padding-left: Wypełnienie lewe.

Wartościami tych właściwości mogą być:

• <długość>: Stała wartość w jednostkach długości (np. px, em, rem). Wartości nie mogą być ujemne.
• <procent>: Wartość procentowa obliczana względem **szerokości (width)** kontenera nadrzędnego (containing block). Co ważne, dotyczy to **wszystkich czterech** właściwości paddingu (padding-top, padding-bottom również!).

.box {
  background-color: lightyellow;
  border: 1px solid orange;

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5%; /* 5% szerokości rodzica */
}

Właściwość zbiorcza padding

Znacznie częściej używa się właściwości zbiorczej (shorthand) padding, która pozwala ustawić wypełnienie dla wszystkich czterech stron jednocześnie. Składnia zależy od liczby podanych wartości:

• Jedna wartość: padding: 20px;
  • Stosuje tę samą wartość do wszystkich czterech stron (góra, prawo, dół, lewo).
• Dwie wartości: padding: 10px 20px;
  • Pierwsza wartość (10px) stosowana jest do góry i dołu.
  • Druga wartość (20px) stosowana jest do prawej i lewej strony.
• Trzy wartości: padding: 10px 20px 15px;
  • Pierwsza wartość (10px) stosowana jest do góry.
  • Druga wartość (20px) stosowana jest do prawej i lewej strony.
  • Trzecia wartość (15px) stosowana jest do dołu.
• Cztery wartości: padding: 10px 20px 15px 5px;
  • Wartości stosowane są kolejno do: góry, prawej, dołu, lewej strony (zgodnie z ruchem wskazówek zegara).

.przyklad-1 { padding: 15px; } /* 15px na wszystkie strony */
.przyklad-2 { padding: 10px 30px; } /* 10px góra/dół, 30px prawo/lewo */
.przyklad-3 { padding: 5px 10px 15px; } /* 5px góra, 10px prawo/lewo, 15px dół */
.przyklad-4 { padding: 5px 10px 15px 20px; } /* 5px góra, 10px prawo, 15px dół, 20px lewo */

Zapamiętanie kolejności przy czterech wartościach (góra, prawo, dół, lewo) jest kluczowe.

Padding a rozmiar elementu (box-sizing: content-box)

Jak wspomniano wcześniej, przy domyślnym box-sizing: content-box;, padding jest **dodawany** do wymiarów określonych przez width i height, aby obliczyć całkowity rozmiar elementu zajmowany na stronie.

Całkowita Szerokość = width + padding-left + padding-right (+ border)

Całkowita Wysokość = height + padding-top + padding-bottom (+ border)

Oznacza to, że dodanie paddingu do elementu o stałej szerokości width faktycznie **zwiększy** jego wizualną szerokość na ekranie.

.stala-szerokosc {
  width: 200px;
  background-color: lightgreen;
  border: 1px solid green;
}

.stala-szerokosc-z-paddingiem {
  width: 200px;
  padding: 20px; /* Dodaje 20px z lewej i 20px z prawej */
  background-color: lightcoral;
  border: 1px solid red;
}

/* .stala-szerokosc zajmie 200px + 2px (border) = 202px szerokości */
/* .stala-szerokosc-z-paddingiem zajmie 200px + 20px + 20px + 2px = 242px szerokości! */

To zachowanie może być czasem nieintuicyjne. Problem ten rozwiązuje box-sizing: border-box;, który zostanie omówiony w dalszej części.