Hva er forskjellen mellom blokk- og innebygde elementer?

Question

Accepted Answer

Hvert element har en standard **display**-oppførsel som kontrollerer hvordan det strømmer i oppsettet. - **Blokk**-elementer starter på en **ny linje** og tar **full tilgjengelig bredde**. De aksepterer bredde/høyde og alle marger/padding. Eksempler: `

`, `

`, `
`, `
`. - Innebygde elementer strømmer innenfor en linje, bare like bred som innholdet deres, og ignorerer bredde/høyde og øvre/nedre marger. Eksempler: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## En praktisk gotcha ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Å sette `bredde`/`høyde` på et innebygd element gjør ingenting. Løsningen er å endre displayen: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — det beste fra begge verdener `inline-block` sitter i tekststrømmen (side ved side) og* respekterer bredde/høyde/marger — perfekt for navigasjonselementer, merker eller knapper som er oppstilt i en rad. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Hvorfor det betyr noe Å forstå standard display forklarer hvorfor `` din ikke tar en høyde, hvorfor `
`er stables, og når du skal bytte til `inline-block`, `flex` eller `grid`. Det er grunnlaget for hvordan elementer ordnes før du bruker noe layoutsystem.