Learn about the difference between block-level & inline block elements in HTML.
In HTML, all elements have a default display value that is inherited by the User Agent Stylesheet (UAS) which is built-in to all browsers.
There are two display value options, block and inline:
- block in CSS:
- inline in CSS:
The behavior or style of any HTML element gets comes from the browser’s User Agent Stylesheet (UAS) — which you can easily override. So any block-level element can be converted into an inline element, with a simple declaration:
display: inline-block; — and vice versa.
In HTML, a block-level element is an element that always starts on a new line (like a line break) and takes up the full width of its container (parent element).
So if I add a
<div> element right below this paragraph, it takes up the entire width of its parent element container from the left to the right edge.
<div>I’m a block-level element.</div>
Ok that’s hard see that it takes up the full width. To make it easier to see let’s add a border to it:
<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
Now you can see the
<div> element takes up the full width of its container, which on this website you’re on is an
As I mentioned, block-level elements start a new line, and here’s how it looks on a code level and how it renders in the browser from the users perspective:
<div style="border:1px solid #dd4c4f">I’m a block-level element.</div> <div style="border:1px solid #dd4c4f">I’m another block-level element.</div>
How it looks:
If the two
<div> elements above were inline they would sit right next to each other on the same line (as you’ll see in the next section). But because they’re block-level elements, they sit on their own line in the layout and each take up the full width of the parent container
A complete list of block-level elements in HTML:
- Contact information.
- Article content.
- Aside content.
- Long ("block") quotation.
- Disclosure widget.
- Dialog box.
- Describes a term in a description list.
- Document division.
- Description list.
- Description list term.
- Field set label.
- Figure caption.
- Groups media content with a caption
- Section or page footer.
- Input form.
- Heading levels 1-6.
- Section or page header.
- Groups header information.
- Horizontal rule (dividing line).
- List item.
- Main content container.
- Contains navigation links.
- Ordered list.
- Preformatted text.
- Section of a web page.
- Unordered list.
In HTML, inline elements are elements that don’t start on a new line, and only takes up the space they need (their content width, e.g. length of the text inside).
<div style="display:inline-block;border:1px solid #dd4c4f;"> I’m a inline-block element </div>
How it looks:
Inline Block elements don’t start on a new line (line break).
So if you have two inline block elements next to each other on a code level:
<div style="display:inline-block;border:1px solid #dd4c4f"> I’m a inline block element. </div> <div style="display:inline-block;border:1px solid #dd4c4f"> I’m a another inline block element. </div>
Then they render in the browser like this:
And just to drive the point of how inline block & block differ from each other, let’s compare them “side by side”:
A list of all inline elements in HTML:
<audio>(only if it has visible controls)
You’ve learned that block & inline elements differ in terms of:
- Full-width (block) vs. content-width (inline)
- New line (block) vs. same line (inline).
But there is another difference between how you can use them:
- Inline block elements cannot contain block-level elements.
- Block elements can contain inline block elements.
So this is not acceptable HTML:
<span><p>Block element inside an inline block element.</p></span>
But this is acceptable in HTML:
<p><span>Inline block element inside a block element.</span></p>
The idea behind this structural content model distinction is that block elements should be used to describe larger structures than inline elements.
Remember, any HTML elements
display value can be overridden in your CSS stylesheet, but what you’ve seen today is how block-level elements and inline-block elements work by default if you don’t style them yourself.