Summary  
This chapter explains the CSS box model concept, detailing how content, padding, border, and margin layers combine to determine an element’s total dimensions and spacing.

General domain of usage  
Web page layout and design

Watch this video to see how the box model works in real web layouts. You'll learn how content, padding, border, and margin interact, and how changing these values affects the size and spacing of elements in general. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

HTML-elementer vises som rektangulære bokser på en nettside. Hvert element har sitt eget innholdsområde, polstring (padding), ramme (border) og marg (margin).

### Innhold
Innholdsområdet inneholder tekst, bilder eller andre elementer.
Dette er den synlige indre delen av elementet.


### Padding
Padding er avstanden mellom innholdet og rammen.
Det skaper intern avstand.
```css
.box {
  padding: 20px;
}
```
Padding øker det synlige størrelsen på elementet.


### Border
Rammen omgir padding og innhold.
```css
.box {
  border: 4px solid darkblue;
}
```
Som standard er rammebredden 0, og rammefargen samsvarer med tekstfargen hvis ikke annet er spesifisert.


### Margin
Margin er avstanden utenfor rammen.
Det skaper avstand mellom elementer.
```css
.box {
  margin: 40px;
}
```
Margin påvirker ikke bakgrunnsfargen til elementet.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJwYWdlIj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4KICAgICAgICA8cCBjbGFzcz0icXVvdGUiPgogICAgICAgICAgIktub3dpbmcgeW91cnNlbGYgaXMgdGhlIGJlZ2lubmluZyBvZiBhbGwgd2lzZG9tLiIgLSBBcmlzdG90bGUKICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwouYm94IHsKICBtYXJnaW46IDQwcHg7IC8qIFNwYWNlIG91dHNpZGUgdGhlIGVsZW1lbnQgKi8KICBib3JkZXI6IDRweCBzb2xpZCBkYXJrYmx1ZTsgLyogVmlzaWJsZSBlZGdlICovCiAgcGFkZGluZzogMjBweDsgLyogU3BhY2UgaW5zaWRlIHRoZSBlbGVtZW50ICovCiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7IC8qIFNob3dzIHRoZSBwYWRkZWQgYXJlYSAqLwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKICBtYXJnaW46IDA7Cn0KCi5wYWdlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CiAgcGFkZGluZzogMTBweDsKfQoKLnF1b3RlIHsKICBmb250LXNpemU6IDE4cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBjb2xvcjogIzMzMzsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9

I dette eksemplet:
- Bakgrunnen fyller innholdet og polstringsområdet;
- Rammen omgir dem;
- Margen skaper plass utenfor boksen.

Som standard har noen elementer forhåndsbestemte `padding`- og `margin`-egenskaper. Dette er gjort for å sikre at en nettside er lesbar selv uten noen stiler.

Merk

Boksmodellen bestemmer hvor mye plass et element opptar på en side.

Den totale størrelsen til et element avhenger av innholdsstørrelse, polstring (padding), kantlinje (border) og marg (margin).

Viktig

Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.

Forstå hvordan CSS kobles til HTML og hvordan stiler brukes gjennom selektorer.
Bruk av farger, tekststiler og hover-effekter for å kontrollere visuell presentasjon.

Forbedre typografi ved hjelp av linjehøyde, avstand, skriftegenskaper og egendefinerte fonter. Kontroller skrifttyper, vekt, stil og størrelse for bedre lesbarhet.

Kontroll av layoutstruktur ved bruk av margin, padding, border og bredde-egenskaper. Forståelse av boksstørrelsesatferd og elementvisningstyper som block, inline og inline-block.

Kontroller horisontale og vertikale oppsett ved hjelp av Flexbox-egenskaper. Juster retning, justering og avstand for å strukturere UI-komponenter.

Forbedre oppsett ved bruk av bakgrunnsfarger, bilder, pseudo-elementer og skygger. Style visuelle komponenter for dybde og kontrast.

Forståelse av boksmodellen på en praktisk måte

De fire delene av boksmodellen

Innhold

Padding

Border

Margin