Block vs Inline Elements

Definition

The two primary display values in HTML that determine how elements sit next to each other on the page.

Explain Like I'm New

Block elements are greedy. They take up the entire width of the screen and force a line break (like a Paragraph). Inline elements are polite. They only take up as much space as their text needs, and sit side-by-side with other elements (like a bold `<b>` tag inside a sentence).

Real World Example

A `<div>` is a block element. A `<span>` is an inline element. If you put two `<div>`s next to each other, they stack vertically. Two `<span>`s will sit horizontally.

Common Use Cases

•Structuring page layouts
•Styling text inline

Interactive Example

Interview Questions

basic

Is an `<h1>` tag block or inline?

intermediate

Can you set the `width` and `height` of an inline element?

Flash Cards

Question

Is h1 block or inline?

Click to reveal answer

Answer

Block. It takes up the full width of its container.

Question

Can you set width/height on inline?

Click to reveal answer

Answer

No. Inline elements completely ignore CSS `width` and `height` properties. If you need to set dimensions but keep it sitting next to other items, you must use CSS `display: inline-block`.