Learn Block vs Inline Elements

Two Display Models

Every HTML element follows one of two default display behaviours:

Block-level elements

Start on a new line and take up the full width available.
You can set width, height, margin, and padding on all sides.
Examples: <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <table>, <section>, <article>, <header>, <footer>, <form>, <blockquote>.

Inline elements

Flow within the text without breaking the line.
Width and height are determined by their content; vertical margin has no effect.
Examples: <span>, <a>, <strong>, <em>, <img>, <code>, <br>, <input>, <label>, <abbr>, <time>.

This distinction is critical for understanding how your page lays out content.

Block vs Inline in Action

html

<!-- Block elements: each starts on a new line -->
<div style="background: #1a1a2e; padding: 8px;">
  <h2>Block Element</h2>
  <p>This paragraph is a block element. It takes the full width.</p>
</div>

<!-- Inline elements: flow within the same line -->
<p>
  This text contains <strong>bold</strong> and <em>italic</em> words,
  plus a <a href="#">link</a> — all inline.
</p>

<!-- Mixing: inline elements inside block elements -->
<p>
  Use <span style="color: #00d4ff;">span</span> to style
  a piece of text without breaking the flow.
</p>

Nesting Rules

HTML has strict rules about which elements can contain which:

Block elements can contain both block and inline elements (with exceptions).
Inline elements should only contain other inline elements — never block elements.
<p> cannot contain block elements. If you put a <div> inside a <p>, the browser will auto-close the paragraph before the div.
<a> is special — it is inline but can wrap block elements in HTML5 (known as "transparent content model").

The `<div>` and `<span>` duo

<div> is the generic block container. Use it when no semantic element fits.
<span> is the generic inline container. Use it to target a piece of text with CSS or JavaScript.

Neither <div> nor <span> carries any semantic meaning — they are purely structural hooks.

The CSS display Property

The block/inline classification is actually a default CSS value. Every element has a default display property:

Block elements default to display: block.
Inline elements default to display: inline.

You can override this with CSS. For example, display: inline-block gives you the inline flow behaviour but allows setting width, height, and vertical margin — the best of both worlds.

Other common display values include flex, grid, and none (hides the element entirely). These are CSS topics, but understanding the HTML defaults is essential before you customise them.

What happens if you place a <div> inside a <p> element?

Block vs Inline Elements