CSS box-sizing eigenschap
Voorbeeld
Opvulling en rand opnemen in de totale breedte en hoogte van het element:
#example1 {
box-sizing: border-box;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De box-sizing
eigenschap definieert hoe de breedte en hoogte van een element worden berekend: moeten ze opvulling en randen bevatten of niet.
Standaardwaarde: | inhoud-box |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.boxSizing="border-box" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit- of -moz- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS-syntaxis
box-sizing: content-box|border-box|initial|inherit;
Eigendomswaarden
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Geef twee omzoomde vakken naast elkaar op:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Voorbeeld
Stel de "universele box-sizing" in:
* {
box-sizing: border-box;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-vakgrootte
HTML DOM-referentie: eigenschap boxSizing