De box-sizingeigenschap in CSS bepaalt hoe het boxmodel wordt afgehandeld voor het element waarop het van toepassing is.
.module ( box-sizing: border-box; )Een van de meest gebruikelijke manieren om het te gebruiken, is door het toe te passen op alle elementen op de pagina, inclusief pseudo-elementen:
*, *::before, *::after ( box-sizing: border-box; )Dit wordt vaak "universele doosmaat" genoemd, en het is een goede manier om te werken! De (letterlijke) die widthu instelt, is de breedte die u krijgt, zonder dat u hoofdrekenen hoeft uit te voeren en de complexiteit moet beheren die voortkomt uit breedtes die afkomstig zijn van meerdere eigenschappen. We hebben hier zelfs een bewustwordingsdag voor dozen.
Waarden
content-box: de standaard. De waarden voor breedte en hoogte zijn alleen van toepassing op de inhoud van het element. De opvulling en rand zijn toegevoegd aan de buitenkant van de doos.padding-box: Breedte- en hoogtewaarden zijn van toepassing op de inhoud van het element en de opvulling. De rand wordt aan de buitenkant van de doos toegevoegd. Momenteel ondersteunt alleen Firefox depadding-boxwaarde.border-box: Breedte- en hoogtewaarden zijn van toepassing op de inhoud, opvulling en rand.inherit: erft de grootte van de doos van het bovenliggende element.
Voorbeeld
Deze voorbeeldafbeelding vergelijkt de standaard content-box(boven) met border-box(onder):
De rode lijn tussen de afbeeldingen vertegenwoordigt de breedtewaarde van de elementen. Merk op dat het element met de standaardwaarde box-sizing: content-box;de aangegeven breedte overschrijdt wanneer de opvulling en rand worden toegevoegd aan de buitenkant van het inhoudsvak, terwijl het element met box-sizing: border-box;toegepast volledig binnen de opgegeven breedte past.
Box Sizing gebruiken
Stel dat u een element instelt op width: 100px; padding: 20px; border: 5px solid black;. Standaard is het resulterende vak 150 px breed. Dat komt omdat het standaardformaatmodel voor dozen is content-box, dat de aangegeven breedte van een element alleen op de inhoud toepast, waarbij de opvulling en de rand buiten de doos van het element worden geplaatst. Dit vergroot effectief hoeveel ruimte het element inneemt.
Als u de box-sizingnaar verandert padding-box, wordt de opvulling in de elementdoos geschoven. Dan zou de doos 110px breed zijn, met 20px opvulling aan de binnenkant en 10px rand aan de buitenkant. Als je de opvulling en de rand in de doos wilt doen, kun je deze gebruiken border-box. De doos zou dan 100 px breed zijn - de 10 px rand en 20 px opvulling worden beide in de doos van het element geschoven.
Demo
Zie de Penvergelijking van box-sizing-waarden door CSS-Tricks (@ css-tricks) op CodePen.
Verwant
widthheightpaddingborder
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder *† | 3 * † | 1 ‡ | 7 * | 8 * | 2.1 * † | Ieder * |
padding-box
† oudere versies vereisen een -webkitvoorvoegsel (Chrome 1-9, Safari 3-5, Android 2.1-3.x)
-moz