Summary  
This chapter explains how display types—block, inline, and inline-block—govern element layout behaviors (line breaking and width) and which CSS properties (like width, height, margin, and padding) can be applied.  

General domain of usage  
Web development

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

## Blokkelementer
- Starter på en **ny linje**;
- Opptar **hele bredden** til beholderen sin;
- Støtter bredde, høyde, margin, padding og kantlinje.

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 sitt**;
- 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**, **marg**, **polstring** og **kantlinje**, som blokk-elementer.

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

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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

Hva er hovedforskjellen mellom blokk- og inline-elementer?

Hvilket av følgende er et eksempel på et blokkelement?

Lær det grunnleggende i CSS (Cascading Style Sheets), stilsett-språket som forvandler utseendet og følelsen til nettsider. Utforsk kjernebegreper som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt tiltalende og godt strukturerte nettsider. Perfekt for nybegynnere som ønsker et solid grunnlag i CSS.

Lær hva CSS er, hvordan det kobles til HTML, og hvordan HTML-elementer styles ved hjelp av selektorer. Utforsk grunnleggende konsepter som tekstfarger, brukerhandlings-pseudoklasser og variabler i CSS.

Utforsk hvordan du kan style og formatere tekst på nettsidene dine. Lær å bruke egendefinerte skrifttyper og undersøk ulike skriftegenskaper for å forbedre tekstens utseende.

Lær det grunnleggende om boksmodellen, som definerer oppsett og avstand for elementer på en nettside. Utforsk konsepter som boksstørrelse, å legge til avstand til elementer, arbeid med blokk- og linjeelementer, samt bruk av strukturelle og funksjonelle pseudoklasser for avansert styling.

Utforsk Flexbox, en kraftig CSS-metode for å arrangere elementer i rader og kolonner. Lær hvordan du kontrollerer retning, justering og avstand mellom elementer horisontalt og vertikalt, samt tilpasser individuelle flex-elementer for presise oppsett.

Lær hvordan du kan forbedre det visuelle uttrykket på nettsidene dine med CSS. Utforsk teknikker for å bruke bakgrunnsfarger og bakgrunnsbilder, style bilder, benytte dekorative pseudo-elementer og legge til skygger for å skape imponerende design.

Forståelse av blokk-, inline- og inline-blokk-elementer

Blokkelementer

Inline-elementer

Inline-block-elementer