Boksmodellen i CSS

Lær boksmodellen i CSS: padding, border, margin, block, inline, inline-block og box-sizing forklart med videoer og praktiske eksempler.

Artikler

Block og inline i CSS forklart

Lær forskjellen mellom block- og inline-elementer i CSS. Forstå hvordan display-verdien styrer layout og når du bruker hvilken.

Boksmodellen i CSS forklart

Lær hvordan boksmodellen fungerer i CSS: content, padding, border og margin. Gratis video med visuell forklaring og eksempler.

Box-sizing i CSS forklart

Lær forskjellen mellom content-box og border-box i CSS. Forstå hvorfor border-box gjør layout enklere og hvordan du bruker det.

Padding i CSS forklart med eksempler

Lær å bruke padding i CSS for å lage luft inne i elementer. Shorthand, individuelle sider og praktiske eksempler med gratis video.

Border i CSS forklart

Lær å legge til og style border i CSS. Tykkelse, stil, farge, avrundede hjørner og shorthand forklart med gratis video.

Margin i CSS forklart

Lær å bruke margin i CSS for avstand mellom elementer. Auto-sentrering, margin collapse og shorthand forklart med gratis video.

Inline-block i CSS forklart

Lær forskjellen mellom inline, block og inline-block i CSS. Forstå når inline-block er nyttig og hvordan det påvirker layout.

Sist oppdatert 3. mai 2026

Har du noen gang satt inn en knapp eller en boks i CSS, bare for å oppdage at den plutselig blir større enn du forventet, eller at avstanden mellom elementene ikke stemmer? Da er du midt i det boksmodellen handler om. Når du forstår hvordan innhold, padding, border og margin jobber sammen, blir det mye enklere å styre layouten din med presisjon.

Hvorfor boksmodellen styrer nesten alt i CSS

Hvert element på en nettside kan ses som en boks, og det påvirker både størrelse, avstand og plassering. Derfor er boksmodellen en av de første tingene du bør forstå når du lærer CSS. Vil du ha en tydelig oversikt over helheten, kan du lese boksmodellen i CSS forklart.

Når du kjenner denne modellen, blir det lettere å lage sider som ser ryddige ut på ulike skjermstørrelser. Du slipper også mange vanlige feil, som elementer som tar mer plass enn du trodde.

Padding, border og margin i praksis

De tre delene rundt innholdet gjør hver sin jobb. Padding gir luft inni boksen, border lager kanten rundt, og margin skaper avstand til andre elementer. Vil du se hvordan dette fungerer med konkrete eksempler, kan du gå videre til padding i CSS forklart med eksempler, border i CSS forklart og margin i CSS forklart.

Disse egenskapene brukes hele tiden når du bygger kort, menyer, knapper og seksjoner. Små justeringer her kan endre både lesbarhet og visuell balanse på siden din.

Når størrelsen ikke oppfører seg som du tror

Mange opplever at en boks blir bredere enn forventet når padding og border legges til. Da er box-sizing ofte løsningen som gjør layouten mer forutsigbar. Vil du lære hvorfor, kan du lese box-sizing i CSS forklart.

Det er også nyttig å forstå forskjellen mellom block, inline og inline-block, fordi de bestemmer hvordan elementer flyter og tar plass. Hvis du vil se hvordan dette påvirker layouten, anbefaler vi block og inline i CSS forklart og inline-block i CSS forklart.

Når du først ser boksmodellen som et verktøy for kontroll, blir CSS langt mer intuitivt. Utforsk artiklene videre, så får du både oversikten og detaljene du trenger for å bygge mer presise og profesjonelle nettsider.