Websites met stijl
Naslag: het box-model
Op dit naslagbad
Vooraf
Alle elementen staan in een box, een rechthoek die het element omsluit. De eigenschappen van de box worden het box-model genoemd.
- In deze naslag worden de eigenschappen van het box-model voor blok-elementen besproken. Box-model eigenschappen voor inline elementen wijken hier en daar af, maar meestal spreek dat voor zichzelf.
- Tenzij anders aangegeven betreft het blok-elementen waarvoor geen width en height zijn opgegeven.
Margin, border, padding
In figuur 1 hieronder is te zien dat de box uit verschillende 'schillen' bestaat. Van binnen naar buiten zijn dat inhoud, padding, border, marge (margin):
- Inhoud (engels: content) is de ruimte voor tekst, plaatje, andere elementen.
- Padding is de ruimte tussen de inhoud en de border (rand). Zonder padding zou de tekst tegen de rand staan. Padding heeft dezelfde achtergrondkleur als de inhoud.
- Voor het instellen: zie naslag padding
- Border is de rand om de afbeelding.
- Voor het instellen: zie naslag border
- Marge (engels: margin) is het gebied buiten de border van de box. De marge zorgt
voor ruimte tussen aangrenzende boxen. De marge is transparant, heeft geen eigen kleur. Je ziet de
achtergrondkleur van de omgeving (nauwkeuriger gezegd: de achtergrond van de parent,
hier beige).
- Voor het instellen: Zie naslag margin
- Als er geen border is (de breedte van de border is dan 0) grenzen de margin en de padding aan elkaar.
- In figuur 1 is de scheiding tussen padding en inhoud aangegeven met een lijn. Dat is alleen voor de duidelijkheid. In werkelijkheid is daar geen lijn.
Afmetingen van de box
- De box (inclusief marge) neemt standaard de hele breedte in van de parent (het element
waarin het staat.)
Staat een blok-element direct in de body, dan is dat de hele breedte van het venster. - De hoogte van de box past zich aan aan de inhoud: hoe meer tekst, hoe hoger de box.
Voorbeelden
Toelichting:
Blok 1
Bij blok 1 zijn marge, border en padding allemaal 20px breed (1 hokje).
Het element neemt de hele breedte in beslag, maar blijft vanwege de
margin 20px uit de bovenrand en de linker- en rechter rand.
Blok 2
Blok 2 heeft dezelfde border en padding, maar heeft een margin van 40px. Het element blijft dus 40px (2 hokjes) verwijderd van de linker en rechter rand. Hierdoor is het smaller.
Marges schuiven in elkaar
Kijk eens naar de afstand tussen blok 1 en blok 2. Je zou verwachten dat die 60px is (20px van blok 1 en 40px van blok 2). Maar hij is 40px: de margins schuiven in elkaar.
Dat lijkt op het eerste gezicht onlogisch,
maar is als volgt te verklaren:
- Blok 1 heeft een margin van 20px en wil dus minstens 20px afstand tot
blok 2.
- Blok 2 heeft een margin van 40px en wil dus minstens 40px van blok 1.
Met een onderlinge afstand van 40px is aan beide voorwaarden voldaan.
Het komt erop neer dat de onderlinge afstand van 2 blok-elementen gelijk is aan de grootste marge van de twee.
Let op: dit in elkaar schuiven van de marges gebeurt alleen vertikaal, niet horizontaal.
box-sizing
Width
Zoals hierboven gezegd neemt een blok-element standaard de hele beschikbare breedte in beslag. Maar dit kan beperkt worden door de width op te geven. Zie naslag: width en height.
Height
Standaard wordt de hoogte van een blok-element bepaald door de inhoud. Hoe meer tekst, hoe groter een plaatje, hoe hoger het element.
Maar met de eigenschap height kan een vaste hoogte worden ingesteld, ongeachte de inhoud. Zie naslag: width en height.
Opmerking
Als met height een vaste hoogte is ingesteld, kan het zo zijn dat er meer tekst in het element staat dan er in past. Wat er met de tekst gebeurt die niet in het vak past wordt bepaald door de eigenschap overflow. Zie de naslag overflow.
Width en height nader bekeken
Bij nader inzien is nog niet duidelijk wat de width en heigth eigenlijk voorstellen. Zijn het breedte en hoogte van de inhoud van het element, of van het element tot en met de border (inhoud+padding+border), of het hele element tot en met de margin?
- Standaard blijken width en height alleen op de inhoud te slaan. Men spreekt dan van de content-box.
- Het is ook mogelijk in te stellen dat width en height de breedte van het element tot en met de border instellen. Dat heet de border-box
- Bij width en height is nooit de margin inbegrepen.
Hieronder worden content-box en border-box besproken.
Content-box
Als width en height, zoals hiervoor aangegeven, betrekking hebben op de inhoud (content) spreekt men van de content-box.
De totale breedte en hoogte van het element tot de buitenzijde van de border kunnen als volgt worden berekend *:
Daarbij komt nog de marge - maar let op: (verticale) marges schuiven in elkaar.
* uiteraard alleen voor zover width en height zijn opgegeven
Content-box is de standaard.
Border-box
Soms is het handiger als de opgegeven hoogte en breedte betrekking hebben op het hele element, tot de buitenkant van de border (dus zonder de marge). Men spreekt dan van de border-box.
Bij de border-box nemen border en padding ruimte af van de inhoud *.
De breedte en hoogte van de inhoud van het element kunnen als volgt worden berekend:
Daarbij komt nog de marge - maar let op: (verticale) marges schuiven in elkaar.
* uiteraard alleen voor zover breedte en hoogte zijn opgegeven
Content-box en border-box
Figuur 5 toont 3 elementen met een breedte van 400px maar met verschillende paddings en borders.
De hoogte is niet ingesteld, die wordt bepaald door de inhoud van de elementen.
Links is de content-box methode gebruikt, rechts de border-box methode.
De eigenschap margin 20px auto zorgt ervoor dat de blokken worden gecentreerd
De eigenschap box-sizing
De eigenschap box-sizing bepaalt of width en height* de breedte resp hoogte van de content (inhoud) aangeven, of inhoud + padding + border.
* Dit geldt ook voor min-width, max-width, min-height, max-height.
Box-sizing kent 4 verschillende waarden:
Standaardwaarde en vererving
| standaard | box-sizing: content-box; |
| vererft | nee |
Voorbeelden van box-sizing
Content-box of border-box?
Heb je veel elementen op je website met dezelfde breedte, dan is het handig om de methode border-box te gebruiken. Hieronder staan 4 methoden om border-box te gebruiken voor je hele website.
Border-box gebruiken voor de hele website
De eenvoudigste manier om border-box in te stellen voor de hele website is die van voorbeeld 3:
Gebruik je ook pseudo-elementen die volgens het border-boxmodel moeten werken, dan kun je kiezen voor methode 2:
Een professionele webbouwer raadt methode 3 aan (zie het artikel):
}
}
of methode 4, die ook werkt met oudere versies van sommige browsers.
}
}
Zet de code van de gekozen methode vooraan in je stijlblad.