CSS padding

CSS padding

padding to wewnętrzny odstęp elementu, czyli przestrzeń między zawartością elementu a jego obramowaniem (border). W języku polskim bywa nazywany marginesem wewnętrznym.

Nie należy mylić go z margin, który oznacza odstęp zewnętrzny — przestrzeń poza obramowaniem elementu.

Najważniejsze właściwości

Do ustawiania wewnętrznych odstępów służą właściwości:

• padding-top — górny odstęp wewnętrzny,
• padding-right — prawy odstęp wewnętrzny,
• padding-bottom — dolny odstęp wewnętrzny,
• padding-left — lewy odstęp wewnętrzny,
• padding — zapis skrócony dla kilku stron naraz.

Przykład użycia

.box {
  padding-top: 20px;
}

Ten kod ustawia górny odstęp wewnętrzny elementu .box na 20px.

Zapis skrócony

.box {
  padding: 10px 20px 30px 40px;
}

Kolejność wartości jest zgodna z ruchem wskazówek zegara:

1. góra — 10px,
2. prawa strona — 20px,
3. dół — 30px,
4. lewa strona — 40px.

Padding a model pudełkowy

padding jest częścią modelu pudełkowego CSS. Znajduje się między treścią elementu a jego obramowaniem. Jeśli element ma tło, to tło obejmuje również obszar paddingu.

Przykład:

div {
  background-color: lightblue;
  border: 2px solid navy;
  padding: 15px;
}

W tym przypadku tekst nie będzie przylegał bezpośrednio do obramowania, ponieważ zostanie odsunięty o 15px od każdej strony.