HTML Block-Level vs Inline-Block Elements (Overview)

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: display:block;
• inline in CSS: display: inline-block;

What is a Block-Level Element?

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.

Code example:

<div>I’m a block-level element.</div>

Result:

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>

Result:

Now you can see the <div> element takes up the full width of its container, which on this website you’re on is an <article> element.

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

All HTML block-level elements

A complete list of block-level elements in HTML:

What are Inline Elements?

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).

Code example:

<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”:

All HTML inline block elements

A list of all inline elements in HTML:

Another key difference between block & inline

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.