What is the Difference Between Inline and Block Elements?

What are block elements?

Block elements are HTML elements that always start on a new line and take up the full available width.

Examples of block elements

• <div>
• <p>
• <h1> to <h6>
• <section>
• <article>
• <ul>, <ol>

What are inline elements?

Inline elements do not start on a new line. They only take up as much width as their content requires.

Examples of inline elements

• <span>
• <a>
• <strong>
• <em>
• <img>
• <label>

Key differences

• Block elements → start on new line
• Inline elements → stay in same line
• Block elements → take full width
• Inline elements → take only needed width

Example comparison

<!-- Block elements -->
<div>Block 1</div>
<div>Block 2</div>

<!-- Inline elements -->
<span>Inline 1</span>
<span>Inline 2</span>

Block elements appear stacked vertically, while inline elements appear side by side.

Can inline and block elements be changed?

Yes. With CSS display property, you can change behavior:

span {
  display: block;
}

div {
  display: inline;
}

Real-world usage

• Block elements → page layout, sections, containers
• Inline elements → text styling, links, small UI parts

Summary

Block elements structure the layout by stacking vertically, while inline elements flow inside text horizontally.

Understanding this difference is essential for mastering HTML and CSS layouts.