Du har satt bredden på et element til 200 piksler, men når du måler det i nettleseren, er det plutselig 258 piksler bredt. Tallene stemmer ikke, og layouten din kollapser. Forklaringen ligger i boksmodellen i CSS. Hvert eneste element på en nettside er en boks, og den boksen er bygget opp av fire lag. Når du forstår hvordan disse lagene fungerer sammen, kan du endelig forutsi hvor store elementene dine faktisk blir.
Boksmodellen i CSS: fire lag rundt innholdet
Alle bokser i CSS består av de samme fire delene, fra innerst til ytterst: content, padding, border og margin. Content er selve innholdet, enten det er tekst, et bilde eller noe annet. Padding er luft mellom innholdet og rammen. Border er rammen rundt boksen. Og margin er avstanden utenfor boksen, mellom dette elementet og naboen.
Tenk på det som et innrammet kunstverk. Kunstverket er content. Den hvite passepartouten rundt er padding. Selve rammen er border. Og avstanden mellom rammen og veggen, eller neste bilde, er margin.
Hvordan nettleseren beregner størrelsen
Når du setter width: 200px på et element, definerer du bare bredden på content-boksen. Alt du legger til utenpå kommer i tillegg. Har du 25 piksler padding på hver side og 4 piksler border på hver side, blir den faktiske bredden 200 + 25 + 25 + 4 + 4 = 258 piksler. Det er dette som overrasker de fleste. Bredden du definerer er ikke bredden du ser.
Høyden beregnes på nøyaktig samme måte. Content-høyden pluss vertikal padding pluss vertikal border gir den totale høyden. Margin påvirker avstanden til andre elementer, men regnes ikke med i selve boksens størrelse.
Se boksmodellen visuelt i nettleseren
Den enkleste måten å forstå boksmodellen på er å bruke utviklerverktøyet i nettleseren. Høyreklikk på et element, velg "Inspect", og klikk på Computed-fanen. Der ser du en grafisk representasjon av boksen med alle fire lagene. Innerst finner du content-størrelsen, deretter padding, border og margin, med pikselverdier på alle fire sider.
Holder du musepekeren over elementet i utviklerverktøyet, ser du lagene visualisert med farger direkte på nettsiden. Det grønne området er padding, og det oransje er margin. Denne visuelle tilbakemeldingen gjør det mye lettere å feilsøke layout enn å prøve å regne i hodet.
Bygg opp en boks steg for steg
En god måte å lære boksmodellen på er å bygge opp en boks gradvis. Start med content ved å sette bredde og høyde. Legg deretter til padding for å skape luft rundt innholdet. Gi elementet en bakgrunnsfarge, så ser du at padding-området også får farge. Legg til border for en synlig ramme. Og til slutt margin for avstand til andre elementer. Når du gjør det i denne rekkefølgen, ser du tydelig hvordan hvert lag påvirker den totale størrelsen.
Block og inline følger ulike regler
Boksmodellen gjelder for alle elementer, men block- og inline-elementer oppfører seg ulikt. Block-elementer respekterer bredde, høyde, padding, border og margin i alle retninger. Inline-elementer ignorerer bredde og høyde, og vertikal padding og margin skyver ikke bort annet innhold. Denne forskjellen er grunnen til at mange opplever at CSS-regler tilsynelatende ikke fungerer.
Problemet med standardmodellen
Standardmodellen i CSS, kalt content-box, gjør at padding og border legges utenpå bredden du definerer. Det betyr at den totale størrelsen alltid er større enn verdien du skriver i CSS-en. For enkel layout er dette håndterbart, men i det øyeblikket du kombinerer prosentbasert bredde med padding, kolliderer elementene. Løsningen er den alternative modellen border-box, som inkluderer padding og border i bredden du definerer.
Lær mer om boksmodellen i CSS med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset bygger du opp bokser steg for steg og ser hvordan hvert lag påvirker layouten:
- Hvordan du bruker Computed-panelet til å inspisere alle fire lagene visuelt
- Hva som skjer med den totale størrelsen når du legger til padding og border
- Hvordan den alternative boksmodellen border-box forenkler beregningene
Du kan lese mer om boksmodellen i MDN sin dokumentasjon om CSS Box Model.
