Block vs Inline Elements
Every HTML element is either block-level or inline. This is one of the most fundamental concepts in HTML and CSS. Understanding display behaviour is the key to controlling layout.
Block Elements
Example 1 — Block Elements Stack Vertically
<!-- Block elements: each starts on a new line --> <h1>This is h1 (block)</h1> <p>This is a paragraph (block). Takes full width.</p> <div>This is a div (block). New line every time.</div> <ul><li>List item (block)</li></ul>
h1: This is h1 (block)
p: This is a paragraph (block). Takes full width.
div: This is a div (block). New line every time.
ul>li: List item (block)
Block elements: h1-h6, p, div, ul, ol, li, table, form, header, footer, nav, section, article, aside, main, blockquote, pre, hr.
Inline Elements
Example 2 — Inline Elements Flow in Text
<!-- Inline: stay in the text flow, no new line --> <p> Normal text, <strong>bold text</strong>, <em>italic text</em>, <a href="#">a link</a>, <code>some code</code>, <span style="color:red">red text</span> — all on one line! </p>
Normal text, bold text, italic text, a link, some code, red text — all on one line!
Inline elements: a, span, strong, em, code, img, button, input, label, small, sub, sup, mark, del, ins, abbr, cite, time.
Inline-Block — The Best of Both
Example 3 — Block + Inline Together
<!-- img is inline by default, but respects width/height --> <p> This is text with an <img src="icon.png" alt="icon" width="20" height="20"/> inline image. </p> <!-- button is also inline-block --> <p> Click <button>this button</button> inside text. </p>
This is text with an inline image.
Click inside text.
img and button are inline-block — they stay in the text flow but you can set width and height. CSS can change any element's display behaviour.
CSS Changes Everything
CSS display property can turn any block into inline or vice versa. display:flex, display:grid, display:inline-block — these override the default HTML behaviour. HTML sets the default; CSS overrides it.
Why This Matters for Layout
Understanding block vs inline explains why p tags cannot go inside span, why you cannot put a div inside a p, and why buttons sit side by side in a nav bar. Most CSS bugs come from not understanding this fundamental difference.