Box Modellen

Alle HTML-elementer er bokser. Box Model forklarer hvordan disse boksene er bygget opp og hvordan de tar plass på siden.

Hva er Box Model?

Tenk deg at hvert element på en nettside er en pakke:

Content - Selve innholdet (gaven inne i pakken)
Padding - Polstring rundt innholdet (bobleplast)
Border - Rammen rundt (esken)
Margin - Avstand til andre pakker (plass mellom esker)

┌─────────────────────────────────────────┐
│                MARGIN                   │
│    ┌───────────────────────────────┐    │
│    │           BORDER              │    │
│    │    ┌─────────────────────┐    │    │
│    │    │      PADDING        │    │    │
│    │    │    ┌───────────┐    │    │    │
│    │    │    │  CONTENT  │    │    │    │
│    │    │    └───────────┘    │    │    │
│    │    └─────────────────────┘    │    │
│    └───────────────────────────────┘    │
└─────────────────────────────────────────┘

Content

Selve innholdet i elementet - tekst, bilder, osv.

.box {
    width: 200px;
    height: 100px;
}

┌──────────────────────┐
│                      │
│      200px bred      │
│      100px høy       │
│                      │
└──────────────────────┘

Automatisk størrelse

Hvis du ikke setter width eller height, tilpasser elementet seg automatisk til innholdet.

Padding

Padding er avstanden mellom innholdet og kanten (border). Det skaper "pusterom" inne i boksen.

.box {
    padding: 20px;
    background: lightblue;
}

┌──────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░┌──────────────┐░░░░░░░ │
│ ░░░░░│   Innhold    │░░░░░░░ │
│ ░░░░░└──────────────┘░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────┘
        ↑ padding (bakgrunnsfargen synes)

Padding-verdier

Én verdiTo verdierFire verdierIndividuelle

Samme padding på alle sider.

padding: 20px;

    20px
    ┌────┐
20px│    │20px
    └────┘
    20px

Første verdi: topp og bunn. Andre verdi: venstre og høyre.

padding: 10px 30px;

    10px
    ┌────┐
30px│    │30px
    └────┘
    10px

Topp, høyre, bunn, venstre (med klokka fra toppen).

padding: 10px 20px 30px 40px;

     10px
    ┌────┐
40px│    │20px
    └────┘
     30px

Sett hver side for seg.

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Huskeregel

Fire verdier går med klokka: Topp → Høyre → Bunn → Venstre (THBV - "Tenk Hardt Før Valg")

Border

Border er rammen rundt elementet.

.box {
    border: 2px solid black;
}

Border shorthand

border: bredde stil farge;

border: 2px solid black;
border: 3px dashed red;
border: 1px dotted gray;

Border-stiler

Stil	Utseende	Beskrivelse
`solid`	───────	Heltrukket linje
`dashed`	- - - -	Stiplet linje
`dotted`	· · · ·	Prikket linje
`double`	═══════	Dobbel linje
`none`	(ingenting)	Ingen border

Individuelle sider

.box {
    border-top: 2px solid red;
    border-right: 3px dashed blue;
    border-bottom: 2px solid green;
    border-left: 1px dotted orange;
}

Border-radius (avrunding)

Gjør hjørnene runde.

Alle hjørnerSirkelPille-formIndividuelle hjørner

border-radius: 10px;

╭──────────────╮
│              │
│              │
╰──────────────╯

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

   ╭──────╮
  ╱        ╲
 │          │
  ╲        ╱
   ╰──────╯

.pill {
    border-radius: 50px;
    padding: 10px 30px;
}

╭──────────────╮
│   Knapp      │
╰──────────────╯

border-radius: 10px 20px 30px 40px;
/* topp-venstre, topp-høyre, bunn-høyre, bunn-venstre */

Margin

Margin er avstanden utenfor elementet - mellom dette elementet og andre elementer.

.box {
    margin: 20px;
}

                    ↑ 20px margin
              ┌───────────┐
   20px ←     │   Boks    │     → 20px
              └───────────┘
                    ↓ 20px margin

Margin-verdier

Fungerer akkurat som padding:

margin: 20px;              /* Alle sider */
margin: 10px 30px;         /* Topp/bunn, venstre/høyre */
margin: 10px 20px 30px 40px;  /* Topp, høyre, bunn, venstre */
margin-top: 10px;          /* Bare toppen */

Midtstille med margin

For å midstolle et element vannrett:

.centered {
    width: 600px;
    margin: 0 auto;  /* auto på venstre og høyre */
}

┌─────────────────────────────────────────┐
│            ┌───────────────┐            │
│     auto   │   Sentrert    │   auto     │
│     ←───   │    boks       │   ───→     │
│            └───────────────┘            │
└─────────────────────────────────────────┘

Krever bredde

margin: auto fungerer bare når elementet har en definert width.

Margin collapse

Når to vertikale marginer møtes, "kollapser" de - bare den største brukes.

.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }

┌───────────┐
│   Boks 1  │
└───────────┘
      ↓ 30px (ikke 50px!)
┌───────────┐
│   Boks 2  │
└───────────┘

Bare vertikalt

Margin collapse skjer bare vertikalt (topp/bunn), ikke horisontalt (venstre/høyre).

Beregne total størrelse

Som standard legges padding og border på toppen av width/height.

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}

Total bredde:

  200px (content)
+  40px (padding: 20px × 2)
+  10px (border: 5px × 2)
─────────
  250px total

│←──────────── 250px ──────────→│
┌──┬────────────────────────┬──┐
│5 │░░░░░░░░░░░░░░░░░░░░░░░░│5 │ ← border
├──┼────────────────────────┼──┤
│  │        200px           │  │
│20│       content          │20│ ← padding
│  │                        │  │
├──┼────────────────────────┼──┤
│5 │░░░░░░░░░░░░░░░░░░░░░░░░│5 │
└──┴────────────────────────┴──┘

box-sizing

Dette kan være forvirrende! Heldigvis finnes box-sizing.

content-box (standard)

width = bare innholdet. Padding og border legges til.

box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* Total: 250px */

border-box (anbefalt)

width = alt inkludert padding og border.

box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* Total: 200px! */

│←────── 200px ──────→│
┌──┬──────────────┬──┐
│5 │░░░░░░░░░░░░░░│5 │
├──┼──────────────┼──┤
│20│   content    │20│ ← content krymper
│  │    150px     │  │
├──┼──────────────┼──┤
│5 │░░░░░░░░░░░░░░│5 │
└──┴──────────────┴──┘

Bruk border-box overalt

De fleste utviklere setter dette øverst i CSS-filen:

* {
    box-sizing: border-box;
}

Anbefalt

border-box gjør livet mye enklere! Da betyr width: 200px faktisk 200px.

Praktiske eksempler

Kort med padding

.card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

Knapp

.button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    background: #007bff;
    color: white;
}

Sentrert container

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

Bilde med ramme

.framed-image {
    padding: 10px;
    border: 3px solid #333;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

Oppsummering

Egenskap	Hva den gjør
`width` / `height`	Størrelse på content (eller hele boksen med border-box)
`padding`	Avstand mellom content og border
`border`	Ramme rundt elementet
`margin`	Avstand til andre elementer
`border-radius`	Avrundede hjørner
`box-sizing`	Hvordan width beregnes

Margin ──→ │         │ ←── Margin
           ┌─────────┐
           │ Border  │
           │ ┌─────┐ │
           │ │Padd │ │
           │ │ ing │ │
           │ │┌───┐│ │
           │ ││ C ││ │
           │ │└───┘│ │
           │ └─────┘ │
           └─────────┘

DevTools

I nettleseren kan du høyreklikke på et element og velge "Inspiser" for å se Box Model visuelt! Se Utviklerverktøy for mer.