Własność CSS width

Własność CSS width określa szerokość elementu. Sposób jej działania różni się w zależności od ustawienia własności box-sizing, czyli wybranego modelu polowego CSS.

Jeśli włączony jest standardowy model polowy, to własność width określa szerokość obszaru treści, do której następnie dodawane są obszar dopełnienia i obramowania.

Jeśli natomiast włączony jest alternatywny model polowy, to własność width określa szerokość całego elementu, czyli obszaru obejmowanego przez krawędzie obramowania.

W przypadku, gdy treść nie mieści się w przestrzeni wyznaczonej przez własność width, sposób postępowania określa własność overflow.

Wartości i składnia

Własność width jako wartość przyjmuje liczby z jednostką długości, wartości procentowe oraz słowa kluczowe: auto, fit-content, max-content i min-content.

• Liczba z jednostką długości
• Wartość procentowa: odnosi się do szerokości bloku zawierającego.
• Słowo kluczowe auto: domyślne ustawienie pozwalające przeglądarce określić szerokość elementu na podstawie jego właściwości, tzn. tego czy jest to element blokowy, śródliniowy itd.
• Słowo kluczowe fit-content: pole elementu zajmuje dostępną przestrzeń w poziomie do granicy wewnętrznego rozmiaru elementu. Mówiąc prościej, szerokość pola jest dostosowywana do szerokości jego treści. Jeśli kontener zawierający element z tą treścią ma mniejszą szerokość od tej treści, to zostanie ona zawinięta. Zobacz przykład użycia wartości fit-content poniżej.
• Słowo kluczowe max-content: szerokość pola elementu jest równa maksymalnej szerokości treści. Jeśli na przykład element zawiera tylko tekst, to nie będzie on zawijany nawet, gdy przekroczy dostępną szerokość elementu, tylko wyjdzie poza jego granice. Zobacz przykład użycia wartości max-content poniżej.
• Słowo kluczowe min-content: szerokość pola elementu jest równa minimalnej szerokości treści. Jeśli na przykład element zawiera tylko tekst, to minimalną szerokością wewnętrzną będzie długość najdłuższego słowa tej treści. Zobacz przykład użycia wartości min-content poniżej.

Przykłady

Najprostszy sposób użycia własności width to np. nadanie jej wartości w pikselach. W poniższym przykładzie element nav będzie miał szerokość 600 pikseli:

nav {
  width: 600px;
}

Wartość procentowa

W tym przykładzie element nav będzie miał 180 pikseli szerokości, ponieważ została ona ustawiona na 30% szerokości bloku zawierającego, która wynosi 600 pikseli (30% z 600 wynosi 180).

<style>
div {
  outline: 1px dashed darkgreen;
  padding: 5px;
  width: 600px;
}
nav {
  outline: 1px solid lightpink;
  width: 30%;
}
</style>
<div>
  <nav>Lorem ipsum dolor sit amet.</nav>
</div>

Słowo kluczowe auto

W tym przykładzie element nav będzie zajmował całą dostępną przestrzeń w poziomie, ponieważ jego własności width została nadana wartość auto. Element nav jest elementem blokowym, a tak właśnie domyślnie zachowują się elementy blokowe.

nav {
  width: auto;
}

Słowo kluczowe fit-content

W tym przypadku szerokość elementu nav zostanie dopasowana do szerokości jego treści.

<style>
div {
  outline: 1px dashed darkgreen;
  padding: 5px;
}
nav {
  outline: 1px solid lightpink;
  width: fit-content;
}
</style>
<div>
  <nav>Lorem ipsum dolor sit amet.</nav>
</div>

Efekt:

W tym przypadku kontener div ma większą szerokość niż treść elementu nav, dlatego jest ona prezentowana w jednym wierszu. Gdybyśmy jednak zmniejszyli szerokość elementu div np. do 100 pikseli, aby była mniejsza od szerokości treści elementu nav, to tekst ten zostałby zawinięty i zajmowałby dwa wiersze, jak widać na poniższym zrzucie ekranu.

Porównaj to z działaniem wartości max-content, która powoduje dopasowanie szerokości elementu do szerokości jego treści i prezentuje ją w całości, ewentualnie powodując jej wyjście poza granice elementu zawierającego.

Słowo kluczowe max-content

W poniższym przykładzie element nav znajduje się w elemencie div. Jeśli element div ma większą szerokość niż treść elementu nav, to obejmuje ją w całości.

<style>
div {
  outline: 1px dashed darkgreen;
  padding: 5px;
}
nav {
  outline: 1px solid lightpink;
  width: max-content;
}
</style>
<div>
  <nav>Lorem ipsum dolor sit amet.</nav>
</div>

Jeśli szerokość elementu div będzie mniejsza od szerokości treści elementu nav, to nie zostanie ona zawinięta, tylko wyjdzie poza granice kontenera, jak widać na poniższym zrzucie ekranu.

Słowo kluczowe min-content

W poniższym przykładzie element p będzie miał szerokość równą szerokości słowa Lorem, ponieważ jest to najdłuższe słowo w jego treści.

<style>
p {
  outline: 1px solid lightpink;
  width: min-content;
}
</style>
<p>Lorem ipsum dolor sit amet.</p>

Efekt:

Zastosowanie

Własność width ma zastosowanie do wszystkich elementów HTML z wyjątkiem śródliniowych elementów niezastępowanych, wierszy tabeli i grup wierszy tabeli.

Podsumowanie