Du setter bredden til 200 piksler på et element, legger til litt padding og en border, og plutselig er elementet 258 piksler bredt. Layouten sprekker, og kolonnene dine passer ikke lenger ved siden av hverandre. Problemet er standardoppførselen til box-sizing i CSS. Med riktig verdi slipper du at padding og border endrer den totale bredden. Det er en av de enkleste endringene du kan gjøre, og den sparer deg for utallige layout-frustrasjoner.
Content-box: den gamle box-sizing-metoden
Standardverdien for box-sizing er content-box. Det betyr at bredden du definerer kun gjelder for innholdsområdet. Padding legges utenpå, og border legges utenpå det igjen. Setter du bredden til 200 piksler, padding til 25 piksler på hver side og border til 4 piksler på hver side, ender du med en boks som er 258 piksler bred.
Dette var den eneste modellen i starten av CSS, og den har skapt hodebry for utviklere i flere tiår. Spesielt når du kombinerer prosentbaserte bredder med padding i piksler, blir regnestykket uforutsigbart. Et element med width: 50% og padding: 20px tar mer enn halvparten av plassen, og det bryter layouten.
Border-box: den moderne box-sizing-metoden
Den alternative modellen heter border-box. Her inkluderes padding og border i bredden du definerer. Setter du bredden til 200 piksler, forblir boksen 200 piksler bred uansett hvor mye padding og border du legger til. Innholdsområdet krymper i stedet for at boksen vokser.
Med samme eksempel som over: 200 piksler bredde, 25 piksler padding og 4 piksler border gir et innholdsområde på 142 piksler. Men den totale bredden er fortsatt 200 piksler, nøyaktig det du definerte. Boksmodellen blir dermed mye lettere å jobbe med fordi bredden du skriver i CSS-en er bredden du faktisk ser i nettleseren.
Slik aktiverer du border-box for hele nettsiden
Du kan legge til box-sizing: border-box på enkeltelementer, men det blir fort tungvint. Hver nettside består av hundrevis av bokser, og du vil ikke gjenta den samme regelen overalt. Den anbefalte metoden, som har vært standard praksis siden 2014, er å sette border-box på HTML-elementet og la alle andre elementer arve verdien.
Teknikken bruker universalselektoren og pseudoelementene ::before og ::after for å sikre at absolutt alle bokser på siden bruker border-box. Du legger denne koden i toppen av CSS-filen din, og så trenger du aldri tenke på det igjen. Alle moderne nettsider bruker denne tilnærmingen, og det er det første du bør gjøre i ethvert nytt CSS-prosjekt.
Når margin fortsatt ligger utenfor
En ting border-box ikke endrer er margin. Margin ligger alltid utenfor boksen, uavhengig av box-sizing. Det gir mening fordi margin er avstanden mellom bokser, ikke en del av selve boksen. Når du beregner hvor mye plass et element faktisk tar, må du fortsatt legge til margin manuelt. Men fordi bredden ellers er forutsigbar med border-box, er dette sjelden et problem i praksis.
Feilsøk box-sizing i utviklerverktøyet
Hvis layouten din oppfører seg uventet, sjekk box-sizing-verdien i utviklerverktøyet. Høyreklikk på elementet, velg "Inspect", og se etter box-sizing i Computed-panelet. Står det content-box, har du trolig glemt å aktivere border-box globalt. Du kan også sammenligne to elementer med ulik box-sizing side om side for å se forskjellen direkte, slik det demonstreres i videoleksjonen dette bygger på.
Arv gjør jobben for deg
Grunnen til at den anbefalte metoden bruker arv i stedet for universalselektoren alene, er fleksibilitet. Hvis du bruker en tredjeparts-komponent som forventer content-box, kan du overstyre box-sizing bare for den komponenten uten at resten av siden påvirkes. Verdien arves nedover i DOM-treet, og du bryter den bare der du trenger det.
Lær mer om box-sizing i CSS med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset ser du den konkrete forskjellen mellom content-box og border-box demonstrert visuelt:
- Hvordan den totale bredden beregnes med begge modellene
- Den anbefalte teknikken for å aktivere border-box på hele nettsiden
- Hvordan du bruker padding og border uten å sprenge layouten
Du kan lese mer om box-sizing i MDN sin dokumentasjon om box-sizing.
