CSS
Het doosmodel

Syntaxis

• maatvoering: parameter ;

parameters

Opmerkingen

Wat is het boxmodel?

De randen

De browser maakt een rechthoek voor elk element in het HTML-document. Het Box-model beschrijft hoe de opvulling, rand en marge aan de inhoud worden toegevoegd om deze rechthoek te maken.

Diagram van CSS2.2 Working Draft

De omtrek van elk van de vier gebieden wordt een rand genoemd . Elke rand definieert een vak.

• De binnenste rechthoek is het inhoudvak . De breedte en hoogte hiervan zijn afhankelijk van de weergegeven inhoud van het element (tekst, afbeeldingen en eventuele onderliggende elementen).
• Hierna volgt het opvulvak , zoals gedefinieerd door de padding . Als er geen padding gedefinieerd, is de opvulrand gelijk aan de inhoudsrand.
• Dan hebben we het grensvak , zoals gedefinieerd door de eigenschap border . Als er geen border breedte gedefinieerd, de randkant gelijk aan de opvulling rand.
• De buitenste rechthoek is het margevak , zoals gedefinieerd door de eigenschap margin . Als er geen margin gedefinieerd, is de margerand gelijk aan de rand.

Voorbeeld

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Met deze CSS worden alle div elementen div met een boven-, rechter-, onder- en linkerrand van 5 5px breed; een marge boven, rechts, onder en links van 50 50px ; en een opvulling voor boven, rechts, onder en links van 20 20px . Als we inhoud negeren, ziet ons gegenereerde vak er als volgt uit:

Schermafbeelding van het paneel Elementstijlen van Google Chrome

• Aangezien er geen inhoud is, heeft het inhoudsgebied (het blauwe vak in het midden) geen hoogte of breedte (0 px bij 0 px).
• Het opvulvak is standaard even groot als het inhoudsvak, plus de breedte van 20 px aan alle vier de randen die we hierboven definiëren met de padding (40 px bij 40 px).
• De grens doos is even groot als de opvulling vak, plus de 5px breedte we definiëren boven de border eigenschap (50px x 50 pixels).
• Ten slotte is het marge-vakje even groot als het randvak, plus de breedte van 50 px die we hierboven definiëren met de eigenschap margin (waardoor ons element een totale grootte van 150 px bij 150 px heeft).

Laten we nu ons element een broer of zus geven met dezelfde stijl. De browser kijkt naar het boxmodel van beide elementen om te bepalen waar het nieuwe element ten opzichte van de inhoud van het vorige element moet worden geplaatst:

De inhoud van elk element wordt gescheiden door een afstand van 150 px, maar de dozen van de twee elementen raken elkaar.

Als we vervolgens ons eerste element wijzigen om geen rechtermarge te hebben, zou de rand van de rechtermarge zich in dezelfde positie bevinden als de rechterrand en zouden onze twee elementen er nu als volgt uitzien:

box-sizing

Het standaard boxmodel ( content-box ) kan contra-intuïtief zijn, omdat de width / height voor een element niet de werkelijke breedte of hoogte op het scherm weergeeft zodra u padding en border aan het element begint toe te voegen.

Het volgende voorbeeld demonstreert dit mogelijke probleem met content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Aangezien de opvulling wordt toegevoegd aan de breedte van het tekstgebied, is het resulterende element een tekstgebied dat breder is dan 100%.

Gelukkig stelt CSS ons in staat om het boxmodel te wijzigen met de eigenschap box-sizing voor een element. Er zijn drie verschillende waarden voor de eigenschap beschikbaar:

• content-box : het algemene box-model - breedte en hoogte omvat alleen de inhoud, niet de opvulling of rand

• padding-box : breedte en hoogte omvatten de inhoud en de opvulling, maar niet de rand

• border-box : breedte en hoogte omvatten de inhoud, de opvulling en de rand

Om het textarea probleem hierboven op te lossen, kunt u gewoon de eigenschap box-sizing in padding-box of border-box . border-box wordt het meest gebruikt.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Gebruik het volgende fragment om een specifiek boxmodel op elk element op de pagina toe te passen:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

In deze codering box-sizing:border-box; wordt niet rechtstreeks toegepast op * , dus u kunt deze eigenschap gemakkelijk overschrijven op afzonderlijke elementen.