CSS box-sizing eigenschap

Definitie en gebruik

De box-sizing-eigenschap laat u toe om een specifieke manier te definiëren om een specifiek element in een bepaald gebied te plaatsen.

Bijvoorbeeld, als u twee naast elkaar staande afgebakende kaders wilt plaatsen, kunt u de box-sizing instellen op "border-box". Dit maakt dat de browser een kader met de opgegeven breedte en hoogte weergeeft en de randen en marges in het kader plaatst.

Zie ook:

CSS3 handleiding:CSS3 gebruikersinterface

HTML DOM referentiehandleiding:boxSizing-eigenschap

Voorbeeld

Stelt twee naast elkaar staande afgebakende kaders voor:

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

Probeer het zelf

Er zijn meer voorbeelden onderin de pagina.

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
content-box

Dit is het breedte-hoogte-gedrag zoals gedefinieerd door CSS2.1.

De breedte en hoogte worden afzonderlijk toegepast op de inhoudsbox van het element.

De binnenste marges en randen van het element worden buiten de breedte en hoogte getekend.
border-box

De breedte en hoogte van het element bepalen het kaderbox van het element.

Dit betekent dat elke binnenste marges en randen van het element binnen de ingestelde breedte en hoogte worden getekend.

De breedte en hoogte van de inhoud kunnen worden verkregen door de breedte en hoogte van het element af te trekken van de randen en de marges.
inherit Stelt dat de waarde van de box-sizing-eigenschap van het ouder-element moet worden overgenomen.

Technische details

Standaardwaarde: content-box
Inheritsiviteit: nee
Versie: CSS3
JavaScript syntaxis: object.style.boxSizing="border-box"

Browserondersteuning

De getallen in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Getallen met -webkit- of -moz- voorafgaand zijn de eerste versie met voorvoegsel.

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