Du setter bredden på en boks til 500px, og den ser perfekt ut på din skjerm. Så åpner du siden på mobilen, og boksen stikker langt utenfor skjermkanten. Problemet er ikke verdien 500. Problemet er enheten. Piksler er absolutte og bryr seg ikke om skjermstørrelsen. Prosent, rem og andre relative enheter tilpasser seg. Velger du feil enhet, lager du et design som bare fungerer på akkurat din skjerm.
Hva er en CSS-enhet?
En dimensjon i CSS består alltid av et tall og en enhet: 500px, 2rem, 50%. Tallet alene betyr ingenting. Skriver du width: 500 uten enhet, ignorerer nettleseren verdien fullstendig. Eneste unntak er 0, som er 0 uansett enhet.
CSS-enheter deles i to grupper: absolutte og relative. Absolutte enheter har en fast størrelse. Relative enheter beregnes ut fra noe annet, som foreldreelementet, rotfontstørrelsen eller nettleservinduet. Forskjellen mellom disse er det viktigste du lærer om CSS-enheter som px, rem og em.
Piksler: absolutt og forutsigbar
Piksler (px) er den mest brukte absolutte enheten. 500px er alltid 500px, uansett skjermstørrelse, foreldreelement eller brukerinnstillinger. Det gjør piksler forutsigbare og enkle å jobbe med.
CSS har også andre absolutte enheter som cm, mm og in (inches). Disse finnes hovedsakelig for utskrift og brukes sjelden på nettsider. I praksis er px den eneste absolutte enheten du trenger å kunne.
Ulempen med piksler er at de ikke skalerer. Setter du fontstørrelsen til 16px, forblir den 16px selv om brukeren har stilt inn nettleseren til å vise større tekst. For brukere med nedsatt syn som har økt standard fontstørrelse, betyr det at teksten din overstyrer deres preferanser. Derfor er piksler best egnet for ting som border-width, box-shadow og små, faste dimensjoner der skalering ikke er ønskelig.
Prosent: relativ til foreldreelementet
Prosent beregnes ut fra foreldreelementet. Setter du width: 50% på en boks, tar den halvparten av foreldreelementets bredde. Er forelderen 800px bred, blir boksen 400px. Endrer forelderen bredde, følger boksen automatisk etter.
Dette gjør prosent til et godt valg for fleksible layouter. En innholdsseksjon med width: 80% ser bra ut på en stor skjerm og tilpasser seg mindre skjermer uten at du gjør noe ekstra. Kombinert med max-width kan du sette en øvre grense slik at innholdet ikke blir altfor bredt på store skjermer.
En vanlig feil er å anta at prosent alltid refererer til bredden. For de fleste egenskaper stemmer det, men padding og margin i prosent beregnes også ut fra foreldreelementets bredde, selv for vertikale verdier som padding-top. Det er kontraintuitivt og en kilde til bugs. Forstår du boksmodellen, blir dette enklere å håndtere.
Rem og em: relative til fontstørrelse
Rem og em er relative enheter basert på fontstørrelse, men de refererer til ulike ting. 1rem er alltid lik fontstørrelsen på rotelementet (<html>), som i de fleste nettlesere er 16px som standard. 1em er lik fontstørrelsen på elementet selv, eller foreldreelementet hvis du bruker em til å sette font-size.
Rem er enklere å forutse. Uansett hvor dypt nestet et element er, er 1rem alltid det samme. Setter du font-size: 1.25rem på en overskrift, blir den 20px (16 * 1.25) uavhengig av konteksten. Brukere som har endret standard fontstørrelse i nettleseren, får en proporsjonalt større tekst. Det er derfor rem er foretrukket for fontstørrelser, marginer og padding.
Em er nyttig i spesifikke tilfeller der du vil at en verdi skal skalere med elementets egen fontstørrelse. For eksempel kan du sette padding: 0.5em på en knapp. Da øker paddingen automatisk hvis du gjør teksten i knappen større. Ulempen er at em-verdier kan "stacke" uforutsigbart i nøstede elementer. Setter du font-size til 1.5em på et element, og barneelementet også bruker 1.5em, blir det 1.5 * 1.5 = 2.25 ganger rotstørrelsen.
Tommelfingerregelen: bruk rem som standard for CSS-enheter, og em bare når du bevisst vil at verdien skal følge elementets fontstørrelse.
Viewport-enheter: relativ til nettleservinduet
vw (viewport width) og vh (viewport height) er relative til størrelsen på nettleservinduet. 100vw er hele vinduets bredde, 50vh er halvparten av vinduets høyde. Disse enhetene bryr seg ikke om foreldreelementer eller fontstørrelser.
Viewport-enheter er nyttige for hero-seksjoner som skal dekke hele skjermen (height: 100vh) eller for tekst som skal skalere med vindusbredden. Men de har en kjent fallgruve på mobil: 100vh inkluderer ikke alltid det synlige området korrekt fordi adresselinjen i mobilnettlesere endrer størrelse. Moderne CSS har løst dette med dvh (dynamic viewport height), som oppdateres når adresselinjen vises og skjules.
Bredde og høyde: la innholdet bestemme
En viktig tommelfingerregel i CSS: sett bredde, men la høyden vokse naturlig. De fleste elementer trenger bare en width eller max-width. Høyden bør følge innholdet. Setter du height: 300px på en boks med tekst, risikerer du at teksten flyter utenfor boksen når det blir mer innhold enn forventet.
Har du noen gang sett tekst som stikker utenfor en boks på en nettside? Det skyldes nesten alltid en fastsatt høyde. Nettleseren prøver å vise alt innholdet, men boksen er for liten. Resultatet er overflow: innholdet er synlig utenfor boksens grenser. Du kan kontrollere dette med overflow: hidden eller overflow: auto, men den bedre løsningen er å unngå faste høyder med mindre du har en god grunn. Bruker du min-height i stedet for height, får boksen en minimumshøyde, men kan fortsatt vokse om innholdet krever det.
Neste steg
Du har nå et solid grunnlag i CSS-enheter som px, rem, em og prosent. For å forstå hvordan bredde, padding og margin faktisk beregnes sammen, les videre om boksmodellen i CSS. Vil du lære hvordan du bygger layouter som tilpasser seg ulike skjermstørrelser, dekker artikkelen om responsiv design media queries og fleksible gridsystemer.
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du også om CSS Grid og Flexbox for moderne layouter, custom properties for gjenbrukbare verdier, og hvordan du kombinerer enheter med calc() for presise beregninger.
