Właściwość CSSModel pudełkowy

padding-inline

Ustawia odstęp wewnętrzny na początku i końcu wiersza. Logiczna wersja padding-left i padding-right, która rozumie kierunek pisma.

Wartość domyślna: 0
Dziedziczona: Nie
Animowalna: tak, jako długość lub procent
Dotyczy: wszystkie elementy poza wewnętrznymi elementami tabel (oprócz komórek)
JavaScript: element.style.paddingInline = "16px"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.search {
  position: relative;
  display: block;
}

.search .icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  translate: 0 -50%;
}

.search input {
  inline-size: 100%;
  padding-block: 10px;
  padding-inline: 40px 12px;
}

HTML przykładu

<style>
  .search + .search { margin-top: 10px; }
  .search input { border: 1px solid #3f3f46; border-radius: 10px; background: #18181b; color: inherit; font: inherit; }
  .search .icon { width: 14px; height: 14px; border: 2px solid #a1a1aa; border-radius: 50%; }
</style>
<label class="search">
  <span class="icon" aria-hidden="true"></span>
  <input type="text" placeholder="Szukaj w dokumentacji">
</label>
<label class="search" dir="rtl">
  <span class="icon" aria-hidden="true"></span>
  <input type="text" placeholder="Szukaj w dokumentacji">
</label>

Podgląd

Drugie pole ma dir="rtl". Ikona i zarezerwowane dla niej miejsce przeniosły się na prawo, choć kod CSS jest ten sam.

Definicja i zastosowanie

Właściwość padding-inline to skrót dla padding-inline-start i padding-inline-end, czyli odstępów wewnętrznych na początku i na końcu osi liniowej. W tekście pisanym poziomo od lewej to lewa i prawa strona, więc padding-inline: 16px daje to samo co padding-left i padding-right po 16px.

Zaleta pojawia się przy zmianie kierunku pisma. Przy dir="rtl" wiersz zaczyna się po prawej, a w piśmie pionowym na górze, i odstępy logiczne same się tam przenoszą. Kierunek wynika z writing-mode i direction samego elementu, a obie te właściwości są dziedziczone, więc zwykle wystarczy ustawić je na przodku.

Skrót padding-block robi to samo na osi blokowej, czyli w zwykłym tekście u góry i na dole. Jego składowe to padding-block-start i padding-block-end. Jedna wartość trafia na oba końce, dwie oznaczają początek i koniec.

Tak jak w zwykłym padding, wartości nie mogą być ujemne. Procenty liczą się od rozmiaru liniowego bloku zawierającego (w poziomym tekście od jego szerokości), także w padding-block.

Składnia

padding-inline: <początek> <koniec>?;
padding-block: <początek> <koniec>?;

Wartości

24px
<długość>
Jedna wartość: po 24px na początku i na końcu wiersza. Paski to padding, a fioletowe pole to obszar treści.
8px 48px
początek koniec
Początek dostaje 8px, koniec 48px. W tekście pisanym od lewej szerszy pasek jest po prawej.
dir="rtl"
tekst od prawej
Ta sama deklaracja 8px 48px w kontenerze z dir="rtl". Koniec wiersza leży teraz po lewej, więc tam trafia szerszy odstęp.
vertical-rl
pismo pionowe
Element pisany pionowo ma oś liniową z góry na dół, więc padding-inline dodaje odstęp u góry i na dole.
padding-block: 16px
oś blokowa
Skrót dla osi blokowej. W poziomym tekście dodaje 16px nad treścią i pod nią.

Wartość	Typ	Opis
24px	<długość>	Jedna wartość: po 24px na początku i na końcu wiersza. Paski to padding, a fioletowe pole to obszar treści.
8px 48px	początek koniec	Początek dostaje 8px, koniec 48px. W tekście pisanym od lewej szerszy pasek jest po prawej.
dir="rtl"	tekst od prawej	Ta sama deklaracja `8px 48px` w kontenerze z `dir="rtl"`. Koniec wiersza leży teraz po lewej, więc tam trafia szerszy odstęp.
vertical-rl	pismo pionowe	Element pisany pionowo ma oś liniową z góry na dół, więc `padding-inline` dodaje odstęp u góry i na dole.
padding-block: 16px	oś blokowa	Skrót dla osi blokowej. W poziomym tekście dodaje 16px nad treścią i pod nią.

Wartości w praktyce

24px

Jedna wartość: po 24px na początku i na końcu wiersza. Paski to padding, a fioletowe pole to obszar treści.

.demo { padding-inline: 24px; }

8px 48px

Początek dostaje 8px, koniec 48px. W tekście pisanym od lewej szerszy pasek jest po prawej.

.demo { padding-inline: 8px 48px; }

dir="rtl"

Ta sama deklaracja 8px 48px w kontenerze z dir="rtl". Koniec wiersza leży teraz po lewej, więc tam trafia szerszy odstęp.

.demo { padding-inline: 8px 48px; }

vertical-rl

Element pisany pionowo ma oś liniową z góry na dół, więc padding-inline dodaje odstęp u góry i na dole.

.demo { writing-mode: vertical-rl; padding-inline: 24px; }

padding-block: 16px

Skrót dla osi blokowej. W poziomym tekście dodaje 16px nad treścią i pod nią.

.demo { padding-block: 16px; }

Obsługa przeglądarek

Szeroko dostępne · od 2021 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Przyciski wyglądają proporcjonalnie przy padding-block: 0.5em; padding-inline: 1em. Odstępy w em rosną razem z rozmiarem czcionki.
Miejsce na ikonę przy początku pola zrób przez padding-inline-start, a samą ikonę ustaw przez inset-inline-start. W wersji od prawej do lewej obie rzeczy same przeskoczą na drugą stronę.
W padding-block procent nadal liczy się od szerokości bloku zawierającego, a nie od wysokości. Do proporcji elementu lepiej użyć aspect-ratio.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs