Summary  
This chapter explains the CSS display property by detailing the behaviors and styling capabilities of block, inline, and inline-block elements and how they impact element layout and spacing.

General domain of usage  
Front-end web page layout and styling

HTML-elementer oppfører seg forskjellig avhengig av om de er **block**, **inline** eller **inline-block**. Disse display-typene påvirker oppsett, avstand og hvilke CSS-egenskaper som kan brukes.

## Block-elementer
- Starter på en **ny linje**;
- Opptar **hele bredden** til beholderen sin;
- Støtter width, height, margin, padding og border.

Vanlige eksempler: `<div>`, `<p>`, `<ul>`, `<li>`, `<h1>–<h6>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxvbD4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgICA8bGk+PHA+TG9yZW0gaXBzdW08L3A+PC9saT4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgPC9vbD4KICAgIDx1bD4KICAgICAgPGxpPjxoND5Mb3JlbSwgaXBzdW0uPC9oND48L2xpPgogICAgICA8bGk+PGg0PkxvcmVtLCBpcHN1bSBkb2xvci48L2g0PjwvbGk+CiAgICAgIDxsaT48aDQ+TG9yZW0sIGlwc3VtIGRvbG9yLjwvaDQ+PC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

aDQgewogIHBhZGRpbmc6IDEycHg7Cn0KCnAgewogIGJvcmRlcjogMXB4IHNvbGlkIHRhbjsKfQ==

## Inline-elementer
- Forblir **på samme linje**;
- Tar kun **plassen som trengs for innholdet**;
- Kan ikke få bredde eller høyde (men kantlinje fungerer).

Vanlige eksempler: `<a>`, `<span>`, `<img>`, `<input>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIC8+CiAgICA8c3Bhbj5Mb3JlbSwgaXBzdW0gZG9sb3IuPC9zcGFuPgogICAgPGEgaHJlZj0iIyI+TG9yZW0sIGlwc3VtLjwvYT4KICAgIDxzcGFuPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyLjwvc3Bhbj4KICA8L2JvZHk+CjwvaHRtbD4=

c3BhbiB7CiAgYm9yZGVyOiAycHggc29saWQgd2hlYXQ7Cn0=

## Inline-block-elementer
- Forblir **inline**, som tekst;
- Støtter **bredde**, **høyde**, **margin**, **padding** og **kantlinje**, som blokk-elementer.

Eksempler: `<button>`, `<select>`, `<textarea>`.

Nyttige når du trenger elementer ved siden av hverandre, men fortsatt ønsker full kontroll over styling.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

Hva er hovedforskjellen mellom blokk- og inline-elementer?

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.

Property	Block	Inline	Inline-Block
Ny linje	Ja	Nei	Nei
Full bredde	Ja	Nei	Nei
Breddekontroll	Ja	Nei	Ja
Høydestyring	Ja	Nei	Ja

Display-egenskap: Block, Inline og Inline-block

Block-elementer

Inline-elementer

Inline-block-elementer

Viktige forskjeller