Block vs Inline Elements

Intermediate ~8 min read

Two Display Types

Every HTML element has a default display value. The two most common are block and inline.

Block-Level Elements

Block elements:

Always start on a new line
Take up the full width available
Have top and bottom margins

Common block elements: <div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>

HTML

CSS

<div style="background: #e3f2fd; padding: 10px; margin: 5px 0;">\n  I am a DIV (block element)\n</div>\n<p style="background: #fff3e0; padding: 10px; margin: 5px 0;">\n  I am a P (block element)\n</p>\n<h3 style="background: #e8f5e9; padding: 10px; margin: 5px 0;">\n  I am an H3 (block element)\n</h3>

Inline Elements

Inline elements:

Do not start on a new line
Only take up as much width as needed
Cannot have top/bottom margins (only left/right)

Common inline elements: <span>, <a>, <strong>, <em>, <img>, <input>

HTML

CSS

<p>\n  This is normal text with \n  <span style="background: #ffeb3b;">a SPAN</span>, \n  <strong>strong text</strong>, \n  <a href="#">a link</a>, and \n  <em>emphasized text</em>.\n</p>

Visual Comparison

See how block elements stack vertically while inline elements flow horizontally:

HTML

CSS

<!-- Block: Takes full width -->\n<div style="background: #e3f2fd; padding: 10px;">\n  Block 1\n</div>\n<div style="background: #bbdefb; padding: 10px;">\n  Block 2\n</div>\n\n<!-- Inline: Side by side -->\n<span style="background: #fff3e0; padding: 5px;">Inline 1</span>\n<span style="background: #ffe0b2; padding: 5px;">Inline 2</span>\n<span style="background: #ffcc80; padding: 5px;">Inline 3</span>

CSS Tip: You can change display behavior with CSS: display: block; or display: inline;

Quick Quiz

Which element is a block-level element by default?

<span>

<a>

<div>

Previous Form Validation

Next Div & Span

Two Display Types

Block-Level Elements

Inline Elements

Visual Comparison

Quick Quiz

Enjoying these tutorials?