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 gengives som rektangulære bokse på en webside. Hvert element har sit eget indholdsområde, polstring (padding), kant (border) og margin.

### Indhold
Indholdsområdet indeholder tekst, billeder eller andre elementer.
Dette er den synlige indvendige del af elementet.


### Polstring
Polstring er afstanden mellem indholdet og kanten.
Det skaber intern afstand.
```css
.box {
  padding: 20px;
}
```
Polstring øger elementets synlige størrelse.


### Kant
Kanten omgiver polstringen og indholdet.
```css
.box {
  border: 4px solid darkblue;
}
```
Som standard er kantens bredde 0, og kantens farve matcher tekstfarven, hvis ikke andet er angivet.


### Margin
Margin er afstanden uden for kanten.
Det skaber afstand mellem elementer.
```css
.box {
  margin: 40px;
}
```
Margin påvirker ikke elementets baggrundsfarve.

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

LyogQ3VycmVudCBmb2N1cyAqLwouYm94IHsKICBtYXJnaW46IDQwcHg7IC8qIFNwYWNlIG91dHNpZGUgdGhlIGVsZW1lbnQgKi8KICBib3JkZXI6IDRweCBzb2xpZCBkYXJrYmx1ZTsgLyogVmlzaWJsZSBlZGdlICovCiAgcGFkZGluZzogMjBweDsgLyogU3BhY2UgaW5zaWRlIHRoZSBlbGVtZW50ICovCiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7IC8qIFNob3dzIHRoZSBwYWRkZWQgYXJlYSAqLwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKICBtYXJnaW46IDA7Cn0KCi5wYWdlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CiAgcGFkZGluZzogMTBweDsKfQoKLnF1b3RlIHsKICBmb250LXNpemU6IDE4cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBjb2xvcjogIzMzMzsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9

I dette eksempel:
- Baggrunden udfylder indholdet og polstringsområdet;
- Rammen omgiver dem;
- Margenen skaber plads uden for boksen.

Som standard har nogle elementer forudbestemte `padding`- og `margin`-egenskaber. Dette er gjort for at sikre, at en webside forbliver læsbar, selv uden nogen former for styling.

Bemærk

Boksemodellen bestemmer, hvor meget plads et element optager på en side.

Den samlede størrelse af et element afhænger af indholdets størrelse, polstring (padding), kant (border) og margin.

Vigtigt

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Forståelse af Box-Modellen på en Praktisk Måde

De fire dele af boksmodellen

Indhold

Polstring

Kant

Margin