Vad är skillnaden mellan block- och inline-element?

Question

Accepted Answer

Varje element har ett standard **display**-beteende som styr hur det flödar i layouten. - **Block**-element startar på en **ny rad** och tar upp **full tillgänglig bredd**. De accepterar bredd/höjd och alla marginaler/padding. Exempel: `

`, `

`, `
`, `
`. - Inline-element flödar inom en rad, bara så bred som innehållet, och ignorerar bredd/höjd och topp-/bottenmarginaler. Exempel: ``, ``, ``, ``. ```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 / ``` Att ställa `width`/`height` på ett inline-element gör inget. Lösningen är att ändra dess display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — det bästa av båda `inline-block` sitter i textflödet (sida vid sida) och* respekterar bredd/höjd/marginaler – perfekt för navigeringselement, märken eller knappar utlagda 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 ``` ## Varför det är viktigt Att förstå standard display förklarar varför din `` inte accepterar en höjd, varför `
`-ar stackas, och när man ska växla till `inline-block`, `flex` eller `grid`. Det är grunden för hur element arrangeras innan du använder något layoutsystem.