inline-size

Ustawia rozmiar elementu wzdłuż wiersza tekstu. W poziomym piśmie to szerokość, a para block-size ustala wysokość.

Wartość domyślna: auto
Dziedziczona: Nie
Animowalna: tak, jako długość lub procent
Dotyczy: wszystkie elementy poza liniowymi niezastępowanymi (np. span), wierszami i grupami wierszy tabel
JavaScript: element.style.inlineSize = "320px"

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

.card {
  inline-size: min(100%, 280px);
  padding: 12px;
  border-radius: 14px;
  background: #18181b;
}

.card img {
  display: block;
  inline-size: 100%;
  block-size: 120px;
  object-fit: cover;
  border-radius: 10px;
}

HTML przykładu

<article class="card">
  <img src="/collections/covers/kurs-html-css-od-podstaw.webp" alt="" width="1536" height="1024">
  <strong style="display: block; margin-top: 8px;">Kurs HTML i CSS</strong>
  <small style="color: #a1a1aa;">11 modułów · 738 zadań</small>
</article>

Podgląd

Definicja i zastosowanie

Właściwość inline-size to logiczny odpowiednik width. Ustala rozmiar elementu na osi liniowej, czyli w kierunku, w którym płynie tekst w wierszu. W zwykłym poziomym tekście to po prostu szerokość i obie właściwości dają ten sam efekt.

Jej para, block-size, ustala rozmiar na osi blokowej, wzdłuż której układają się kolejne akapity. W poziomym piśmie to wysokość. Gdy element dostanie writing-mode: vertical-rl, role się zamieniają: inline-size steruje wysokością, a block-size szerokością.

Obie mają wersje z ograniczeniami: min-inline-size, max-inline-size, min-block-size i max-block-size. Działają jak min-width, max-width i ich pionowe odpowiedniki. Wszystkie przyjmują te same wartości co width: auto, długości, procenty oraz min-content, max-content i fit-content.

Tak jak width, inline-size nie działa na elementach liniowych, takich jak <span>. To samo słownictwo spotkasz w zapytaniach o kontener: container-type: inline-size śledzi właśnie rozmiar liniowy.

Składnia

inline-size: auto | <długość> | <procent> | min-content | max-content | fit-content;
block-size: auto | <długość> | <procent> | min-content | max-content | fit-content;

Wartości

auto
Element blokowy zajmuje całą dostępną długość wiersza, czyli całą szerokość rodzica.
160px
<długość>
Stały rozmiar liniowy. W poziomym tekście to 160px szerokości.
50%
<procent>
Połowa rozmiaru liniowego bloku zawierającego.
block-size: 80px
oś blokowa
Para dla osi blokowej. W poziomym tekście ustawia wysokość elementu.
max-inline-size: 24ch
górny limit
Akapit ma najwyżej około 24 znaków w wierszu. W piśmie pionowym ta sama reguła ograniczyłaby wysokość kolumny tekstu.
vertical-rl
pismo pionowe
W piśmie pionowym oś liniowa biegnie z góry na dół, więc inline-size: 100px ustawia wysokość elementu, a nie szerokość. Szerokość wynika teraz z treści.

Wartość	Typ	Opis
auto		Element blokowy zajmuje całą dostępną długość wiersza, czyli całą szerokość rodzica.
160px	<długość>	Stały rozmiar liniowy. W poziomym tekście to 160px szerokości.
50%	<procent>	Połowa rozmiaru liniowego bloku zawierającego.
block-size: 80px	oś blokowa	Para dla osi blokowej. W poziomym tekście ustawia wysokość elementu.
max-inline-size: 24ch	górny limit	Akapit ma najwyżej około 24 znaków w wierszu. W piśmie pionowym ta sama reguła ograniczyłaby wysokość kolumny tekstu.
vertical-rl	pismo pionowe	W piśmie pionowym oś liniowa biegnie z góry na dół, więc `inline-size: 100px` ustawia wysokość elementu, a nie szerokość. Szerokość wynika teraz z treści.

Wartości w praktyce

auto

Element blokowy zajmuje całą dostępną długość wiersza, czyli całą szerokość rodzica.

.demo { inline-size: auto; }

160px

Stały rozmiar liniowy. W poziomym tekście to 160px szerokości.

.demo { inline-size: 160px; }

50%

Połowa rozmiaru liniowego bloku zawierającego.

.demo { inline-size: 50%; }

block-size: 80px

Para dla osi blokowej. W poziomym tekście ustawia wysokość elementu.

.demo { block-size: 80px; }

max-inline-size: 24ch

Akapit ma najwyżej około 24 znaków w wierszu. W piśmie pionowym ta sama reguła ograniczyłaby wysokość kolumny tekstu.

.demo { max-inline-size: 24ch; }

vertical-rl

W piśmie pionowym oś liniowa biegnie z góry na dół, więc inline-size: 100px ustawia wysokość elementu, a nie szerokość. Szerokość wynika teraz z treści.

.stage { writing-mode: vertical-rl; width: 100%; height: 170px; }
.demo { inline-size: 100px; }

Obsługa przeglądarek

Szeroko dostępne

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

Chrome
Edge
Firefox
Safari

Dobre praktyki

Na kolumnę tekstu dobrze działa max-inline-size: 65ch. W piśmie pionowym ta sama reguła rozsądnie ograniczy wysokość kolumny.
Nie ustawiaj width i inline-size na tym samym elemencie. Opisują ten sam wymiar, więc wygrywa deklaracja, która w kaskadzie pada później, a to łatwo przeoczyć.
Jeśli inline-size nie działa, sprawdź display. Tak jak width, nie zadziała na <span> ani <a> bez zmiany na inline-block lub block.

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