Wat is het box model?
Het box model beschrijft hoe elk element op een pagina is opgebouwd: van binnen naar buiten de inhoud, de padding, de rand en de marge.
Samen bepalen die vier hoe breed en hoe hoog iets uiteindelijk wordt.
Dat is de bron van de meeste onverwachte uitlijningen.
De vier lagen
De inhoud is je tekst of je afbeelding. Daaromheen ligt padding, dan een eventuele rand en daarbuiten de marge.
Meer daarover lees je bij css.
Waar het misgaat
Een blok van driehonderd pixels breed met twintig padding aan beide kanten wordt in de standaardberekening driehonderdveertig breed.
Meer daarover lees je bij grid.
De oplossing
Een instelling die de padding binnen je opgegeven breedte houdt. Vrijwel elk modern thema zet die standaard aan.
Meer daarover lees je bij design system.
Mijn vuistregels
- Zet de instelling voor insluitende breedte aan.
- Denk van binnen naar buiten.
- Gebruik het inspectievenster van je browser.
- Bij een rare breedte: tel padding en rand op.
Die derde toont je het model in kleuren en lost negen van de tien vragen op.
Hoe je het bekijkt
Klik met rechts op een element en kies inspecteren. Onderin zie je een tekening met alle vier de lagen en hun waarden.
Meer daarover lees je bij breakpoint.
Waarom je dit wilt weten
Omdat je in elke paginabouwer met deze vier waarden werkt, ook als je nooit code schrijft.
Meer daarover lees je bij het verschil tussen padding en margin.