A max-width tulajdonság

A max-width tulajdonság egy elem maximális szélességét határozza meg. A tulajdonság értéke bármely mértékegység a méretekhez vagy a none kulcsszó, ami azt jelenti, hogy nincs érték megadva.

A tulajdonságot általában lebegő szélességű elemekre állítják be (a szélesség százalékban van megadva, vagy egyáltalán nincs megadva, és az elem a tartalma szerint bővül). Ha egy elem szélessége százalékban van megadva - a böngészőablak szélességének növelésével az is növekedni fog, amíg el nem éri a max-width értékét.

Szintaxis

szelektor {
	max-width: érték;
}

Példa

Ebben a példában a szélesség a szülő szélességének százalékában van megadva. Növelje a böngészőablak szélességét, és a tároló is megnő, hogy alkalmazkodjon a böngészőablak szélességéhez. Azonban csak a max-width által meghatározott értékig, azaz 900px-ig fog bővülni. Amint a tároló eléri ezt a szélességet - nem fog tovább növekedni:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	height: 300px;
	border: 1px solid black;
}

Példa

Ebben a példában a tároló szélessége mindkét oldalról korlátozva van: nem lehet nagyobb 900px-nál és kisebb 400px-nál:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lásd még

a min-width tulajdonság,
amely egy elem minimális szélességét határozza meg
a max-height tulajdonság,
amely egy elem maximális magasságát határozza meg
a min-height tulajdonság,
amely egy elem minimális magasságát határozza meg