~/hackweb.dev
Block vs Inline Elements
Quiz
...

Block vs Inline Elements

beginner · updated Tue Sep 08 2026Contribute

Understand how elements display and the CSS display property.

Block vs Inline Elements

HTML elements display in two main ways: block-level and inline. Understanding this helps you control layout and apply CSS correctly.

Block-Level Elements

Block elements start on a new line and take up the full width available:

<div>I'm a block element</div>
<div>I start on a new line</div>

<p>Paragraphs are block elements</p>

<h1>Headings are block elements</h1>

<section>Sections are block elements</section>

Block elements:

  • Start on a new line
  • Take up 100% width
  • Can contain other block or inline elements
  • Respect width/height properties

Inline Elements

Inline elements flow within text without breaking the line:

<p>
  This is a paragraph with
  <strong>bold text</strong>,
  <em>italic text</em>, and
  <a href="#">a link</a>
  all on the same line.
</p>

Inline elements:

  • Don’t start on a new line
  • Only take up necessary width
  • Can’t contain block elements
  • Width/height properties don’t apply

Common Block Elements

<div>Division (generic container)</div>
<p>Paragraph</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<ul>Unordered list</ul>
<ol>Ordered list</ol>
<li>List item</li>
<form>Form</form>
<table>Table</table>
<header>Header</header>
<footer>Footer</footer>
<main>Main content</main>
<section>Section</section>
<article>Article</article>
<aside>Aside</aside>
<nav>Navigation</nav>

Common Inline Elements

<span>Span (generic inline)</span>
<a href="#">Link</a>
<strong>Bold/strong emphasis</strong>
<em>Italic emphasis</em>
<img src="photo.jpg" alt="Image" />
<br />
<code>Code</code>
<small>Small text</small>
<mark>Highlighted text</mark>
<sub>Subscript</sub>
<sup>Superscript</sup>
<time>Time</time>
<abbr>Abbreviation</abbr>

Visual Comparison

<!-- Block: Each takes full width, stacked vertically -->
<div style="background: lightblue;">Block 1</div>
<div style="background: lightgreen;">Block 2</div>
<div style="background: lightcoral;">Block 3</div>

<!-- Inline: Flow horizontally, only take necessary width -->
<p style="background: lightblue;">
  Inline
  <span style="background: lightgreen;">elements</span>
  <span style="background: lightcoral;">flow</span>
  horizontally
</p>

Block result:

Block 1 (full width)
Block 2 (full width)
Block 3 (full width)

Inline result:

Inline elements flow horizontally

Inline-Block Elements

A hybrid that flows inline but accepts width/height:

<div style="display: inline-block; width: 100px; background: lightblue;">
  Inline-block 1
</div>
<div style="display: inline-block; width: 100px; background: lightgreen;">
  Inline-block 2
</div>

Inline-block elements:

  • Flow inline (don’t break line)
  • Accept width/height
  • Respect margin/padding
  • Common for buttons, form elements

CSS Display Property

Override default display behavior:

/* Make a block element inline */
div {
  display: inline;
}

/* Make an inline element block */
span {
  display: block;
}

/* Inline-block hybrid */
button {
  display: inline-block;
}

/* Hide element */
.hidden {
  display: none;
}

/* Flexbox (modern layout) */
.flex-container {
  display: flex;
}

/* Grid (modern layout) */
.grid-container {
  display: grid;
}

Complete Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .block {
        background: lightblue;
        margin: 10px 0;
        padding: 10px;
      }

      .inline {
        background: lightgreen;
        padding: 5px 10px;
      }

      .inline-block {
        display: inline-block;
        width: 150px;
        background: lightcoral;
        padding: 10px;
        margin: 5px;
        text-align: center;
      }

      .flex {
        display: flex;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    <!-- Block Elements -->
    <h1>Block Elements</h1>
    <div class="block">Div 1</div>
    <div class="block">Div 2</div>
    <p class="block">Paragraph</p>

    <!-- Inline Elements -->
    <h1>Inline Elements</h1>
    <p>
      Text with
      <span class="inline">inline span 1</span>
      and
      <span class="inline">inline span 2</span>
    </p>

    <!-- Inline-Block Elements -->
    <h1>Inline-Block Elements</h1>
    <div class="inline-block">Box 1</div>
    <div class="inline-block">Box 2</div>
    <div class="inline-block">Box 3</div>

    <!-- Flexbox -->
    <h1>Flexbox Layout</h1>
    <div class="flex">
      <div class="block">Flex 1</div>
      <div class="block">Flex 2</div>
      <div class="block">Flex 3</div>
    </div>
  </body>
</html>

When to Use Each

Use block elements for:

  • Page structure (header, main, footer)
  • Sections and articles
  • Forms and tables
  • Paragraphs and headings

Use inline elements for:

  • Text formatting (bold, italic, links)
  • Small elements within text
  • Labels and tags

Use inline-block for:

  • Buttons
  • Form controls
  • Navigation items
  • Small cards that need width/height

Common Mistakes

  1. Expecting width/height on inline elements — Use inline-block or block
  2. Putting block elements inside inline — Invalid nesting
  3. Using display: none to hide content — Bad for accessibility
  4. Overriding default display — Understand before changing
  5. Ignoring semantic meaning — Don’t use div for everything