Własność CSS max-width

Własność CSS max-width określa maksymalną możliwą 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ść max-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ść max-width określa szerokość całego elementu, czyli obszaru obejmowanego przez krawędzie obramowania.

Wartości i składnia

Własność max-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. Ich szczegółowy opis wraz z przykładami znajduje się w opisie własności CSS width.

Przykład

W tym przypadku element section będzie miał szerokość nie większą niż 300 pikseli:

section {
  max-width: 300px;
}

Zastosowanie

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

Podsumowanie