CSS box-sizing egenskap

Definition och användning

box-sizing-attributet låter dig definiera hur en specifik element definierar ett område.

Till exempel, om du behöver placera två ramade rutor bredvid varandra, kan du sätta box-sizing till "border-box". Detta låter webbläsaren visa rutor med specificerad bredd och höjd, och lägger in ramen och inre marginaler i rutan.

Se också:

CSS3-guide:CSS3 användargränssnitt

HTML DOM referenshandbok:boxSizing-attributet

Exempel

Definierar två parallella ramade rutor:

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

Prova själv

Det finns fler exempel längre ner på sidan.

CSS-syntax

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

Attributvärde

Värde Beskrivning
content-box

Detta är det beteende för bredd och höjd som definieras av CSS2.1.

Bredd och höjd tillämpas på elementets innehållsram.

Inre marginaler och ramar ritas utanför bredd och höjd.
border-box

Bredd och höjd som specificeras för elementet bestämmer elementets rambox.

Detta innebär att alla inre marginaler och ramar som specificeras för elementet ritas inom den inställda bredden och höjden.

Innehållets bredd och höjd kan fås genom att subtrahera ramen och inre marginaler från den inställda bredden och höjden.
inherit Definierar att box-sizing-attributets värde ska härledas från föräldrelementet.

Tekniska detaljer

Standardvärde: content-box
Arvsförmåga: nej
Version: CSS3
JavaScript-syntax: object.style.boxSizing="border-box"

Webbläsarstöd

Tal i tabellen noterar den första webbläsarversionen som fullständigt stöder egenskapen.

Tal med -webkit- eller -moz- som prefix indikerar den första versionen som använder prefixet.

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