box-sizing

Dit artikel heeft een technische beoordeling nodig. Hoe u kunt helpen.

Dit artikel heeft een redactionele beoordeling nodig. Hoe u kunt helpen.

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Overzicht

Het box-sizing attribuut wordt gebruikt om het standaard CSS box model aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.

Initial valuecontent-box
Applies toall elements that accept width or height
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword waarden */
box-sizing: content-box;
box-sizing: border-box;

/* Globale waarden */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

Waarden

content-box
Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. De width en height attributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld: .box {width: 350px;} Daarna voeg  je {border: 10px solid black;} toe. Resultaat: (in browser) .box {width:370px;}

Kort samengevat worden de afmetingen van een element berekent als volgt: width = breedte van de content en height = hoogte van de content, exclusief borders of paddings.
border-box
De width en height waarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld: .box {width: 350px; border: 10px solid black;} resulteert in een gerenderd element met width: 350px. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van border-box een element de doen verdwijnen.
De afmetingen worden berekend als volgt: width = border + padding + breedte van de inhoud en height = border + padding + hoogte van de inhoud.

Formele syntax

content-box | border-box

Examples

/* ondersteund in Firefox, Chrome, Safari, Opera, IE8+ en oude Android */

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Specificaties

Specificatie Status Opmerking
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification.
Candidate Recommendation Initiele definitie

Browser compatibiliteit

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Standaard ondersteuning 1.0 -webkit[1]
10.0
(Yes) 1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)

8.0[1]

7.0 3.0 (522)-webkit
5.1[2]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Standaard ondersteuning 2.1-webkit[1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
9.0 (Yes) (Yes)

[1] box-sizing wordt niet gerespecteerd als de hoogte wordt berekend door window.getComputedStyle(), in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen currentStyle attribuut geeft niet de juiste waarde voor height terug.

[2] De vendor prefix -webkit is verwijderd sinds 534.12.

Zie ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: WartClaes
 Laatst bijgewerkt door: WartClaes,