CSS box-sizing egenskab

Definition og brug

box-sizing egenskaben lader dig definere en bestemt måde at matche et område med en bestemt element på.

For eksempel, hvis du har brug for at placere to rammer side om side, kan du sætte box-sizing til "border-box". Dette får browseren til at vise rammer med specificerede bredde og højde, og lægge kantlinjen og indrykning i rammen.

Se også:

CSS3 tutorial:CSS3 Brugergrænseflade

HTML DOM reference manual:boxSizing egenskaben

Eksempel

Definerer to parallelt stillede rammer med kanter:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Prøv det selv

Der er flere eksempler nederst på siden.

CSS syntaks

box-sizing: content-box|border-box|inherit;

Egenskabsværdi

Værdi Beskrivelse
content-box

Dette er den bredde- og højdeadfærd, der er defineret af CSS2.1.

Bredde og højde anvendes hver for sig på elementets indholdskasse.

Indrykning og kantlinjer til elementet tegnes uden for bredde og højde.
border-box

Bredde og højde for elementet bestemmer elementets kantboks.

Det betyder, at enhver indrykning og kant, der er angivet for elementet, vil blive tegnet inden for den indstillede bredde og højde.

Indholdets bredde og højde kan opnås ved at trække kantlinjen og indrykning fra den indstillede bredde og højde.
inherit Definerer, at værdien af box-sizing skal arves fra forældreelementet.

Tekniske detaljer

Standardværdi: content-box
Arv: nej
Version: CSS3
JavaScript syntaks: object.style.boxSizing="border-box"

Browserunderstøttelse

Talene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Tal med -webkit- eller -moz- som præfiks repræsenterer den første version, der bruger præfikset.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5