What is the difference between block and inline elements?

Question

Accepted Answer

Every element has a default **display** behavior that controls how it flows in the layout. - **Block** elements start on a **new line** and take the **full available width**. They accept width/height and all margins/paddings. Examples: `

`, `

`, `
`, `
`. - Inline elements flow within a line, only as wide as their content, and ignore width/height and top/bottom margins. Examples: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## A practical gotcha ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Setting `width`/`height` on an inline element does nothing. The fix is to change its display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — the best of both `inline-block` sits in the text flow (side by side) and* honors width/height/margins — perfect for nav items, badges, or buttons laid out in a row. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Why it matters Understanding default display explains why your `` won't take a height, why `
`s stack, and when to switch to `inline-block`, `flex`, or `grid`. It's the foundation of how elements arrange before you apply any layout system.