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:
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
Zastosowanie | Wszystkie elementy HTML z wyjątkiem śródliniowych elementów niezastępowanych, wierszy tabeli i grup wierszy tabeli |
---|---|
Obsługiwane wartości |
|
Wartość początkowa | auto |
Dziedziczenie | Nie |
Specyfikacja | CSS Box Sizing Module Level 3 |