What Are Block Elements?
A block-level element always starts on a new line and stretches to fill the full width of its parent container. Even if its content is just one word, the element occupies an entire horizontal strip of the page.
Think of block elements as building blocks that stack vertically — each one sits on its own row.
<!-- All of these start on their own line -->
<div>I am a div — a generic block container</div>
<p>I am a paragraph — block level</p>
<h2>I am a heading — block level</h2>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>Common block-level elements:
- Structural / layout:
<div>,<header>,<footer>,<main>,<section>,<article>,<aside>,<nav> - Text grouping:
<p>,<blockquote>,<pre> - Headings:
<h1>through<h6> - Lists:
<ul>,<ol>,<li>,<dl> - Other:
<table>,<form>,<hr>
What Are Inline Elements?
An inline element flows within the surrounding text. It only takes up as much width as its content requires and does not start on a new line. Multiple inline elements sit side-by-side on the same line, just like words in a sentence.
<!-- Inline elements flow within text -->
<p>
This sentence has <strong>bold text</strong>, an
<a href="/html/">anchor link</a>, and
<em>italic text</em> — all on the same line.
</p>
<!-- span, code, mark are also inline -->
<p>
Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
The <code>class</code> attribute adds CSS.
Use <mark>highlight</mark> for emphasis.
</p>Common inline elements:
- Text formatting:
<span>,<strong>,<em>,<b>,<i>,<u>,<small>,<mark>,<abbr> - Navigation / interaction:
<a>,<button>,<input>,<label> - Media / code:
<img>,<code>,<kbd> - Other:
<br>,<q>,<cite>,<time>
Key Differences at a Glance
| Property | Block Element | Inline Element |
|---|---|---|
| Default width | 100% of parent container | As wide as its content |
| Starts new line? | Yes — always | No — flows in line with text |
| Top/bottom margin | Respected by browser | Top/bottom margin has no effect |
| Top/bottom padding | Respected, pushes content | Applied but does not push adjacent lines |
| Width / height settable? | Yes | No (ignored by browser) |
| Can contain block elements? | Yes (usually) | No — only inline content |
| Can contain inline elements? | Yes | Yes |
| Examples | div, p, h1, section | span, a, strong, img |
Visual Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.block-demo { background: #cce5ff; border: 2px solid #0d6efd; margin: 4px 0; padding: 6px; }
.inline-demo { background: #d1e7dd; border: 2px solid #198754; padding: 2px 6px; }
</style>
</head>
<body>
<!-- Block elements stack vertically -->
<div class="block-demo">Block element 1 (div) — fills full width</div>
<p class="block-demo">Block element 2 (p) — also fills full width</p>
<!-- Inline elements sit side by side -->
<p>
<span class="inline-demo">Inline 1</span>
<span class="inline-demo">Inline 2</span>
<a class="inline-demo" href="#">Inline link</a>
— they all share the same line.
</p>
</body>
</html>Nesting Rules
HTML has strict rules about which elements can contain which:
<!-- ❌ Block element (p) inside inline element (a) -->
<a href="/page">
<p>This paragraph is invalid inside a link.</p>
</a>
<!-- ❌ Block element (div) inside inline element (span) -->
<span>
<div>This div is invalid inside a span.</div>
</span>
<!-- ❌ p cannot contain another p -->
<p>First <p>Second paragraph</p> — browser auto-closes first <p></p><!-- ✅ Inline inside block -->
<p>Click <a href="/html/">here</a> to learn more.</p>
<!-- ✅ Block inside block -->
<div>
<h2>Card Title</h2>
<p>Card description text.</p>
</div>
<!-- ✅ Inline inside inline -->
<a href="#"><strong>Bold link text</strong></a>
<!-- ✅ HTML5 exception: a can wrap block elements -->
<a href="/article">
<article>
<h2>Article heading</h2>
<p>Article preview…</p>
</article>
</a>CSS display Property Preview
CSS can override the default display type of any element using the display property. This is how frameworks like Bootstrap turn <a> tags into full-width buttons or make <li> items sit horizontally in a navigation bar.
| Value | Behaviour | Common use |
|---|---|---|
block | Full width, starts new line, width/height settable | Make <a> a block button |
inline | Flows in text, ignores width/height/top margin | Make <li> horizontal |
inline-block | Flows inline but respects width, height, margin | Inline buttons with set size |
none | Element hidden — no space reserved | Toggle visibility with JS |
flex | Flex container — children laid out with flexbox | Navigation bars, cards |
grid | Grid container — children positioned in a grid | Page layouts |
/* Make links behave like blocks (useful for nav items) */
nav a {
display: block;
padding: 0.5rem 1rem;
}
/* Make list items sit side by side */
.menu li {
display: inline-block;
margin-right: 1rem;
}
/* Hide an element completely */
.hidden {
display: none;
}Common Mistakes
Inline elements ignore width and height. Switch to display: inline-block or display: block if you need size control.
<p> inside an <a> (pre-HTML5)
Although HTML5 allows transparent content models that permit block elements inside <a>, putting a <p> directly inside <a> is still invalid. Wrap the <a> around an <article> or <div> instead, or restructure your markup.
Don't use <div> or <p> just to change a word's colour. Use <span> for inline text styling — it won't break the text flow.
The W3C Markup Validator catches invalid nesting errors instantly. Make it part of your workflow.
📋 Summary
- Block elements start on a new line, fill the full width, and stack vertically. Examples:
div,p,h1–h6,section,article. - Inline elements flow within text, only as wide as their content. Examples:
span,a,strong,em,img. - Block elements can contain both block and inline children. Inline elements should only contain inline content.
- The
displayCSS property lets you override the default behaviour of any element. - Nesting a block element inside an inline element (e.g.
divinsidespan) is invalid HTML and can cause unpredictable rendering.
Frequently Asked Questions
Is <img> block or inline?
<img> is inline by default, but it is a replaced element — it has intrinsic dimensions. Unlike text-based inline elements, you can set its width and height attributes in HTML, and CSS width/height properties work on it. Many developers set display: block on images inside containers to avoid the small gap that appears below inline images.
Can I use display: block on a <span>?
Yes — CSS can change how any element renders visually. But the HTML meaning doesn't change. A <span> styled as a block still semantically acts as a generic inline element in the document model. Prefer using semantically correct elements and only use CSS display overrides when needed for layout.
What is inline-block used for?
display: inline-block is useful when you need an element to sit on the same line as other content (like inline) but also respect width, height, and vertical margin/padding (like block). Classic examples: horizontal navigation buttons, image+caption units, or form input+label pairs.
Do all browsers treat block/inline the same?
Yes — the block/inline distinction is a fundamental part of the CSS specification and is consistent across all modern browsers. The default display values for HTML elements are defined in the browser's built-in stylesheet (the UA stylesheet) and are identical across Chrome, Firefox, Safari, and Edge.