Egenskapen max-width

Egenskapen max-width sätter den maximala bredden på ett element. Värdet på egenskapen kan vara vilken enhet för storlekar som helst eller nyckelordet none, vilket betyder frånvaro av värde.

Egenskapen sätts vanligtvis för ett element med flytande bredd (bredden är angiven i procent eller inte angiven alls, och elementets bredd anpassas efter dess innehåll). Om elementets bredd är angiven i procent - kommer den att öka när webbläsarfönstret görs bredare, tills den når värdet för max-width.

Syntax

selektor {
	max-width: värde;
}

Exempel

I detta exempel är bredden en procent av förälderns bredd. Gör webbläsarfönstret bredare, och containern kommer också att vidgas, för att anpassa sig efter webbläsarfönstrets bredd. Men den kommer bara att öka till storleken som definierats i max-width, det vill säga 900px. När containern når denna bredd - kommer den att sluta öka:

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

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

Exempel

I detta exempel är containerns bredd begränsad från båda håll: den kan inte bli större än 900px och mindre än 400px:

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

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

Se även

egenskapen min-width,
som sätter ett elements minimala bredd
egenskapen max-height,
som sätter ett elements maximala höjd
egenskapen min-height,
som sätter ett elements minimala höjd