Hvad er forskellen mellem block og inline elementer?

Question

Accepted Answer

Hvert element har en standard **display** adfærd, som styrer, hvordan det flyder i layoutet. - **Block** elementer starter på en **ny linje** og optager den **fulde tilgængelige bredde**. De accepterer bredde/højde og alle margener/paddings. Eksempler: `

`, `

`, `
`, `
`. - Inline elementer flyder inden for en linje, kun så bredt som deres indhold, og ignorerer bredde/højde og top/bund margener. Eksempler: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Et praktisk problem ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` At indstille `width`/`height` på et inline element gør intet. Løsningen er at ændre dets display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — det bedste fra begge verdener `inline-block` sidder i tekstflowet (side ved side) og* respekterer bredde/højde/margener — perfekt til navigationspunkter, badges eller knapper arrangeret på en række. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Hvorfor det betyder noget At forstå standard display forklarer, hvorfor din `` ikke vil tage en højde, hvorfor `
`er stakles, og hvornår du skal skifte til `inline-block`, `flex` eller `grid`. Det er grundlaget for, hvordan elementer arrangeres, før du anvender noget layoutsystem.