width
Ustawia szerokość elementu.
- 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.width = "240px"
Przykład
#.card {
width: 100%;
max-width: 320px;
}<div class="card stage">
<strong>Kurs Python</strong>
<p style="margin: 6px 0 0">Karta ma maksymalnie 320px szerokości, a na wąskich ekranach się zwęża.</p>
</div>Definicja i zastosowanie
#Właściwość width określa szerokość obszaru treści elementu. Przy domyślnym box-sizing: content-box do tej wartości dochodzą jeszcze odstępy wewnętrzne i obramowanie, dlatego wiele projektów ustawia globalnie box-sizing: border-box.
Elementy blokowe z width: auto rozciągają się na całą dostępną szerokość rodzica. Procenty liczą się od szerokości bloku zawierającego, a słowa kluczowe min-content, max-content i fit-content dopasowują szerokość do treści.
Na elementy liniowe, takie jak <span> czy <a>, width nie działa. Trzeba zmienić ich display na inline-block, block albo użyć ich wewnątrz kontenera flex lub grid.
Składnia
#width: auto | <długość> | <procent> | min-content | max-content | fit-content;Wartości
#- Element blokowy zajmuje całą dostępną szerokość rodzica.
<długość>
Stała szerokość w pikselach lub innej jednostce długości.<procent>
Połowa szerokości bloku zawierającego.- Szerokość najdłuższej linii treści bez zawijania.
- Tyle, ile potrzebuje treść, ale nie więcej niż dostępne miejsce.
Wartości w praktyce
#auto
.demo { width: auto; }160px
.demo { width: 160px; }50%
.demo { width: 50%; }max-content
.demo { width: max-content; }fit-content
.demo { width: fit-content; }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
#- Zamiast stałej szerokości w pikselach często lepsze jest
max-width. Element zwęża się wtedy na małych ekranach. - Ustaw w arkuszu
*, *::before, *::after { box-sizing: border-box; }, żebywidthobejmowało też padding i obramowanie.
Powiązane hasła
#- heightUstawia wysokość elementu.
- max-widthUstala maksymalną szerokość, powyżej której element się nie rozciągnie.
- min-widthUstala minimalną szerokość, poniżej której element się nie zwęży.
- box-sizingDecyduje, czy width i height obejmują padding i obramowanie.
- aspect-ratioUstala proporcje szerokości do wysokości elementu.
- inline-sizeUstawia rozmiar elementu wzdłuż wiersza tekstu. W poziomym piśmie to szerokość, a para block-size ustala wysokość.
Widzisz błąd albo brakuje przykładu? Napisz do nas.