Inline and Block Elements in HTML

When you first start writing HTML, it can feel a little random. Why does a heading push everything down below it? Why does a <strong> tag sit right next to text without breaking anything? The answer comes down to one simple concept: block and inline elements.

Once you understand this, your pages will start making a lot more sense. And you will write cleaner, more intentional HTML because of it.

We have already covered HTML tags, elements, and attributes in detail, and we even touched on the block vs inline distinction there. Now it is time to go deeper. In this tutorial, we will break down exactly how block and inline elements work, show you what they look like visually, and teach you how to mix them the right way.

01What Are Block and Inline Elements in HTML?

Every HTML element has a default display behavior. That behavior is either block or inline. This is set by the browser automatically, even before you write a single line of CSS.

Think of it this way:

• A block element behaves like a building brick. It takes up the full width available and stacks on top of the next element.
• An inline element behaves like a word in a sentence. It flows with the surrounding text and only takes up as much space as it needs.

These two behaviors control everything about how your content is arranged on the page. Let’s look at each one carefully.

02Block Elements in HTML: They Own the Whole Row

A block-level element always starts on a new line and stretches to fill the full width of its container. Even if the content inside is just one word, the element still claims the entire horizontal space.

Here is the simplest example you will ever see:

<p>I am a block element.</p>
<p>So am I. I start on a new line automatically.</p>
<p>And me too. Each paragraph gets its own row.</p>

Each <p> tag pushes to a new line on its own. You did not add a line break. The browser did it because <p> is a block element.

The same thing happens with headings, divs, sections, and most structural HTML tags. They are all block elements by default.

How Block Elements Behave: The Key Rules

There are three things that make a block element what it is:

• It always starts on a new line, no matter what comes before it.
• It takes up 100% of the width of its parent container by default.
• You can set a width, height, margin, and padding on it freely in CSS.

That last point matters a lot. Block elements give you full control over spacing and sizing. Inline elements, as you will see shortly, are more restrictive.

03Block-Level Elements You Will Use Every Day

You have already been using block elements since your first HTML page. You just might not have called them that.

Here is a list of the most common block elements in HTML:

<!-- Headings - all six are block elements -->
<h1>Main Heading</h1>
<h2>Sub Heading</h2>

<!-- Paragraph -->
<p>A paragraph of text.</p>

<!-- Division / generic container -->
<div>A div block.</div>

<!-- Lists -->
<ul>
  <li>List item</li>
</ul>

<!-- Semantic layout elements -->
<header>Top of page</header>
<main>Main content area</main>
<section>A content section</section>
<article>A standalone piece of content</article>
<footer>Bottom of page</footer>

<!-- Other common block elements -->
<form>...</form>
<table>...</table>
<blockquote>A long quote.</blockquote>
<pre>Preformatted text.</pre>

All of these elements stack vertically, one after the other. That is how your page’s layout gets built from top to bottom.

We covered semantic block elements like <section>, <article>, and <header> in depth in our article on what is semantic HTML and why it matters. If you are not familiar with those yet, that is a great read after this one.

04Inline Elements in HTML: They Flow With the Text

Inline elements are completely different in how they behave. They do not break onto a new line. They sit right inside the text, flowing with it naturally, just like a word in a sentence.

A bold word inside a paragraph is a perfect example. The <strong> tag is an inline element. It wraps the word without pushing anything else to a new line:

<p>This is a sentence with a <strong>bold word</strong> inside it.</p>

The bold word sits right in the middle of the paragraph. Nothing gets pushed. Nothing breaks. The element is inline.

How Inline Elements Behave: The Key Rules

Inline elements follow their own set of rules:

• They do not start on a new line. They flow with surrounding content.
• They only take up as much width as their content needs.
• You cannot set a width or height on them with CSS. They simply ignore it.
• Top and bottom margin and padding have limited effect. Left and right work fine.

That third point trips up a lot of beginners. If you put width: 200px on a <span>, nothing will happen. That is because <span> is an inline element and does not respond to width settings.

05Common Inline Elements in HTML

Here are the inline elements you will use regularly:

<p>
  This text has <strong>bold</strong> and <em>italic</em> words.
  Here is an <a href="#">inline link</a> that stays in the flow.
  This <span>span element</span> is also inline.
  A <code>code snippet</code> inline too.
  Even <img src="small-icon.png" alt="icon"> images are inline by default.
  You can <mark>highlight text</mark> with mark.
  Use <small>small text</small> for fine print.
  Track <del>deleted text</del> or <ins>inserted text</ins>.
  Superscript like E=mc<sup>2</sup> and subscript like H<sub>2</sub>O.
  Use <abbr title="HyperText Markup Language">HTML</abbr> for abbreviations.
</p>

Every single one of these elements lives inside a line of text. They dress it up, link it, or give it meaning without ever breaking the flow.

We covered many of these in our HTML text formatting tutorial, where you can learn the difference between <strong> vs <b> and <em> vs <i> in detail.

06Seeing the Difference: Block vs Inline Side by Side

Reading about it is one thing. Seeing it is another. Here is a live visual demo that makes the difference impossible to miss:

Notice how block elements each get their own row, and inline elements just sit right inside the sentence. That is the whole concept in one visual.

07Mixing Block and Inline Elements: What Is Allowed?

You will almost always use block and inline elements together. That is completely normal. But there are rules about how you can nest them.

The golden rule: you can put inline elements inside block elements, but you should not put block elements inside inline elements.

Here is the correct way to mix them:

<!-- CORRECT: inline elements inside block elements -->
<p>
  Read our full <a href="https://daniyaldev.com/what-is-semantic-html-and-why-its-your-secret-weapon/">guide on semantic HTML</a>
  to understand <strong>why element choice matters</strong> in real projects.
</p>

<div>
  <span>This span is inline, inside a block div.</span>
  <em>This em tag is inline too.</em>
</div>

Now here is the wrong way:

<!-- WRONG: block elements inside inline elements -->
<span>
  <div>This div inside a span is invalid HTML.</div>
</span>

<a href="#">
  <p>A paragraph inside a link is also invalid.</p>
</a>

Browsers may still try to render these, but they will fix the HTML in unpredictable ways behind the scenes. Some browsers will break the nesting and produce layout bugs. It is better to write it correctly from the start.

There is one modern exception: in HTML5, you can wrap a block element with an <a> tag to make a large clickable area. This is allowed in HTML5, but it is a specific rule for <a> only.

<!-- HTML5 EXCEPTION: wrapping block content with a link -->
<a href="https://daniyaldev.com/mastering-html-headings-how-to-build-a-clear-content-hierarchy/">
  <div>
    <h3>Mastering HTML Headings</h3>
    <p>Click this entire card to go to the article.</p>
  </div>
</a>

08The CSS display Property Changes Everything

Block and inline are the default behaviors. But CSS lets you override them completely using the display property.

This is one of the most powerful things in web development. You can take any element and change how it behaves on the page.

<style>
  /* Make a span (inline) behave like a block element */
  .block-span {
    display: block;
    background: #1e293b;
    padding: 10px;
    margin-bottom: 8px;
  }

  /* Make a div (block) behave like an inline element */
  .inline-div {
    display: inline;
    background: #6366f1;
    color: white;
    padding: 2px 8px;
  }
</style>

<p>
  <span class="block-span">I am a span, but display: block makes me act like a div.</span>
  <span class="block-span">Each span now stacks on its own row.</span>
</p>

<div class="inline-div">I am a div</div>
<div class="inline-div">but we sit side by side</div>
<div class="inline-div">because of display: inline</div>

This is what makes CSS navigation menus, button rows, and horizontal layouts possible. You take block elements and change their display behavior to line them up.

09Inline-Block: A Useful Middle Ground

There is a third display value worth knowing right now: display: inline-block. It combines the best of both worlds.

An inline-block element:

• Flows with the text like an inline element (no automatic new line)
• But also accepts width, height, and full top/bottom spacing like a block element

<style>
  .card {
    display: inline-block;
    width: 140px;
    height: 80px;
    background: #1e293b;
    border: 1px solid #6366f1;
    border-radius: 8px;
    text-align: center;
    line-height: 80px;
    color: #a5b4fc;
    margin: 4px;
    font-size: 0.85rem;
  }
</style>

<div class="card">Card One</div>
<div class="card">Card Two</div>
<div class="card">Card Three</div>

Without inline-block, those three cards would stack vertically. With it, they line up side by side while still respecting a fixed width and height.

Here is a quick comparison of all three values together:

10A Real Example: Navigation Built with Display Changes

Here is something you will actually build. A simple horizontal navigation bar. By default, <li> items are block elements (they stack). We change display to make them line up.

<style>
  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1e293b;
    border-radius: 8px;
    padding: 10px 16px;
  }
  nav li {
    display: inline-block; /* li is block by default, we change it */
    margin-right: 20px;
  }
  nav a {
    color: #a5b4fc;
    text-decoration: none;
    font-size: 0.95rem;
  }
  nav a:hover {
    color: #ffffff;
  }
</style>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Without display: inline-block on those <li> elements, every link would be on its own line. This is a real-world use of the display concept you just learned.

11Common Mistakes Beginners Make with Block and Inline Elements

These are the errors that show up again and again. Knowing them now will save you a lot of debugging time later.

Trying to Set Width on an Inline Element

This is probably the most common one. You try to size a <span> or an <a> tag and nothing happens:

<style>
  /* This will NOT work as expected */
  span {
    width: 200px;
    height: 50px;
    background: #6366f1; /* won't even show as a box */
  }
</style>

<span>I refuse your width.</span>

<style>
  /* Fix: add display: block or inline-block */
  span.fixed {
    display: inline-block;
    width: 200px;
    height: 50px;
    background: #6366f1;
    color: white;
    line-height: 50px;
    text-align: center;
    border-radius: 6px;
  }
</style>

<span class="fixed">Now I respect your width.</span>

Putting a Paragraph Inside a Paragraph

Two block elements of the same type should not be nested this way:

<!-- WRONG -->
<p>
  Outer paragraph.
  <p>Inner paragraph. This is invalid HTML.</p>
</p>

<!-- CORRECT -->
<p>First paragraph.</p>
<p>Second paragraph. Two siblings, not nested.</p>

The browser will fix this by automatically closing the first <p> when it sees the second one open, which can break your layout in ways that are hard to trace.

Forgetting That Images Are Inline

This surprises many beginners. The <img> tag is an inline element by default. That means if you place an image inside a paragraph, there will be a small gap below it because of the text baseline alignment. A simple fix:

<style>
  /* Fix the gap below inline images */
  img {
    display: block;
  }
</style>

Setting an image to display: block removes that baseline gap and is a very common CSS reset that developers apply to all images.

12Quick Reference Cheat Sheet: Block and Inline Elements

13Putting It All Together: A Full Page Example

Here is a complete page that uses both block elements for structure and inline elements for text formatting. Read through it and notice exactly where each type is being used:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block and Inline Demo Page</title>
  <style>
    body { font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; }
    header { border-bottom: 2px solid #6366f1; padding-bottom: 12px; margin-bottom: 24px; }
    article { background: #f9fafb; padding: 20px; border-radius: 8px; }
    footer { margin-top: 24px; font-size: 0.85rem; color: #888; border-top: 1px solid #e5e7eb; padding-top: 12px; }
  </style>
</head>
<body>

  <!-- BLOCK: header, h1, nav, ul, li -->
  <header>
    <h1>My Simple Blog</h1>
    <nav>
      <ul style="list-style:none; padding:0; display:flex; gap:16px;">
        <!-- li is block by default, flexbox changes its layout -->
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>

  <!-- BLOCK: main, article, h2, p -->
  <main>
    <article>
      <h2>Understanding HTML Display Types</h2>

      <!-- BLOCK: p | INLINE: strong, em, a, mark -->
      <p>
        Every element has a <strong>default display type</strong>.
        Learning this makes your <em>layouts much easier</em> to control.
        Visit our <a href="https://daniyaldev.com/what-are-html-tags-elements-and-attributes/">HTML elements guide</a>
        to see the full list. The key insight is <mark>block vs inline</mark>.
      </p>

      <!-- BLOCK: p | INLINE: code, abbr -->
      <p>
        Use <code>display: block</code> to change an inline element,
        or <code>display: inline</code> to flip a block element.
        <abbr title="Cascading Style Sheets">CSS</abbr> gives you full control.
      </p>
    </article>
  </main>

  <!-- BLOCK: footer | INLINE: a -->
  <footer>
    <p>Written by <a href="#">Daniyal Dev</a></p>
  </footer>

</body>
</html>

Block elements built the entire structure of that page. Inline elements handled the text details inside. That is exactly how every real webpage works.

14What You Learned Today

You now understand one of the most foundational concepts in HTML. Here is a fast summary of what we covered:

• Block elements start on a new line, take full width, and can be sized freely.
• Inline elements flow with text, only take as much space as they need, and ignore width/height settings.
• You can put inline elements inside block elements, but not the other way around (with the HTML5 <a> exception).
• The CSS display property lets you override these defaults with block, inline, or inline-block.
• Common mistakes include trying to set width on inline elements and incorrectly nesting block elements.

This is not abstract knowledge. Every layout you will ever build in HTML depends on understanding how elements flow. The more naturally this thinking comes to you, the faster and cleaner your code will be.

Next, we recommend exploring how an HTML document is structured from top to bottom, because understanding document structure and display types together gives you a complete mental model of how a page is built.