Block vs Inline Elements

In Plain English

Every HTML element has a default display behavior: it is either a Block element (takes up the entire width of the screen, pushing everything below it) or an Inline element (takes only the space its text needs, sitting happily next to neighbors).

The Mental Model

"Block elements are like heavy shipping containers—you cannot put two side-by-side without a giant crane; they stack on top of each other. Inline elements are like words in a sentence—they flow side-by-side until they run out of room at the edge of the page."

Deep Dive: How It Works

Block Elements: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <section>, <header>, <form>. They always start on a new line and stretch 100% full width.

Inline Elements: <span>, <a>, <strong>, <em>, <code>, <button>, <input>, <label>. They do NOT start on a new line and only take as much width as necessary.

Nesting Rule: Block elements can contain inline and other block elements. Inline elements should NEVER wrap block elements.

Syntax Blueprint

<!-- Block: Stacks vertically -->
<div>Block 1</div>
<div>Block 2</div>

<!-- Inline: Sits side-by-side -->
<span>Inline 1</span> <span>Inline 2</span>

Block elements claim full horizontal space; inline elements wrap tightly around text.

Core Rules to Remember

Block = Full Width: Always breaks onto a new line and stretches across the page.

Inline = Tight Fit: Flows within sentences without breaking line flow.

CSS Overrides: In CSS, you can change any element to display: inline-block, flex, or grid.

Common Beginner Traps & How to Fix Them

Mistake:Putting a block element inside an inline element

Why it happens: Wrapping a <div> or <h1> inside an <em> tag.

How to fix: Always wrap inline elements inside block containers, not the other way around.

Pro Tip: If two elements are stacking on top of each other and you want them side-by-side, check if they are block elements!

Live Interactive Example

Hit Run Code to see it live

Block vs Inline Comparison

HTML5

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: Divs claim full rows, whereas spans sit side-by-side horizontally.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create block and inline elements

Create a <div> with text "Block Container"
Inside or below it, create a <span> with text "Inline Word"

Browser Preview & Output

Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

Block Elements: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <section>, <header>, <form>. They always start on a new line and stretch 100% full width.

Inline Elements: <span>, <a>, <strong>, <em>, <code>, <button>, <input>, <label>. They do NOT start on a new line and only take as much width as necessary.

Nesting Rule: Block elements can contain inline and other block elements. Inline elements should NEVER wrap block elements.