Understanding the difference
HTML elements fall into two display categories: block and inline. Knowing which is which explains a lot about page layout – why some tags start on a new line, why others sit in the flow of text, and why certain CSS properties seem to do nothing.
What are block elements?
Block elements represent a chunk of content that sits apart from what comes before and after. They typically take up the full width of their container.
Characteristics of block elements
- They start on a new line.
- They take up the full width available, stretching to the edges of their container.
- They can have margins and padding on all sides.
- Examples include
<div>,<p>,<h1>to<h6>,<ul>,<ol>, and<li>.
Basic example
<div>This is a block element</div>
<p>So is this paragraph</p>In the browser, each element starts on its own line and stretches to the full width of the container.
What are inline elements?
Inline elements sit within the normal flow of text. They don’t force a line break and only take up as much width as their content needs.
Characteristics of inline elements
- They do not start on a new line.
- They only take up as much width as their content.
- They cannot have top and bottom margins, and you can’t set a width or height on them (by default).
- Examples include
<span>,<a>,<img>, and text elements like<strong>and<em>.
Basic example
This is a <span>span element</span> and here is <a href="#">a link</a>.These elements appear on the same line as the surrounding text.
Mixing inline and block elements
Block elements can contain inline elements, but inline elements should not contain block elements. Break that rule and the browser will often fix it for you in unpredictable ways.
Example of mixed elements
<p>This is a paragraph with a <span>span element</span> inside it.</p>Here, the inline <span> sits inside the block-level <p> – which is exactly what you’d expect.
Converting between inline and block
CSS can override the default display behaviour. The display property lets you treat an inline element as block, or the other way around.
Making an inline element behave like a block
span {
display: block;
}Making a block element behave like inline
div {
display: inline;
}Inline-block
Sometimes you want an element to sit in the inline flow but still accept a width and height. That’s what inline-block is for.
span {
display: inline-block;
}The <span> can now have a width and height like a block element, but it still sits on the same line as its neighbours.
Why this matters for layout
Understanding block and inline behaviour helps you:
- Structure your HTML more effectively.
- Understand why some CSS styles don’t apply to certain elements.
- Diagnose layout issues more quickly.
- Build more complex layouts with a mix of block, inline, and inline-block elements.
Flexbox, Grid, and the basics
Flexbox and Grid give you far more control over layout than block and inline defaults ever did. Even so, the underlying distinction still explains a lot of what you see in the browser – and why a quick display: block fix sometimes sorts things out.
Block and inline are foundational. Once you know how each type behaves by default, CSS layout becomes much less mysterious.