HTML Block & Inline Elements

Every HTML element has a default display behavior, usually either block or inline. Understanding this is one of the most important HTML basics because it affects layout, spacing, and how elements sit next to each other on the page.

When elements stack vertically or flow inside a line of text, that behavior often comes from whether the element is block-level or inline by default. CSS can change those defaults later, but learning the base behavior first makes layout much easier to understand.

Block Elements

A block element starts on a new line and usually takes up the full available width of its container. Block elements naturally stack one below another, which makes them ideal for larger structural parts of the page.

You can generally control block elements more freely with width, height, margin, and padding.

<!-- Each of these starts on a new line -->
<div>This is a div (generic block container)</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>
<ul>
    <li>List item</li>
</ul>
<table><tr><td>Table cell</td></tr></table>
<form>...</form>
<header>Site header</header>
<section>Page section</section>
<footer>Site footer</footer>

Inline Elements

An inline element does not start on a new line. It flows inside surrounding text and only takes up as much width as its content needs. Inline elements are commonly used for links, emphasis, icons, and small pieces of text inside paragraphs.

By default, inline elements do not behave like full boxes, so width and height usually do not apply the same way they do for block elements.

<!-- These flow within text -->
<p>
    This is <strong>bold</strong>,
    this is <em>italic</em>,
    this is <a href="#">a link</a>,
    and this is <span style="color:red">red text</span>.
    All on the same line.
</p>

<!-- Other inline elements -->
<p>Press <kbd>Ctrl+C</kbd> to copy.</p>
<p>H<sub>2</sub>O and E=mc<sup>2</sup></p>
<p>Price: <mark>$9.99</mark></p>

Block vs Inline - Quick Reference

Inline-Block Elements

There is also a useful middle ground called inline-block. An inline-block element stays in line with nearby content like an inline element, but it also accepts width, height, padding, and margin like a block element. This is often used for buttons, badges, navigation items, and small layout components.

<span style="display:inline-block; width:120px; padding:10px; background:#e5f0ff;">
    Inline-block box
</span>
<span style="display:inline-block; width:120px; padding:10px; background:#ffe8d6;">
    Another box
</span>

Changing Display with CSS

Even though elements have default behaviors, CSS can change them. A block element can be turned into an inline element, and an inline element can be turned into a block or inline-block element. This gives developers flexibility when designing layouts.

p {
    display: inline;
}

a.button {
    display: inline-block;
    padding: 10px 16px;
    background: #2563eb;
    color: white;
}

span.note {
    display: block;
    margin-top: 12px;
}

Nesting Rules

Block and inline elements also matter when nesting HTML. In general, block elements can contain inline elements, and many block elements can contain other block elements as well. Inline elements are more limited and are usually meant to wrap short pieces of content rather than entire layout sections.

Invalid nesting can confuse browsers and hurt accessibility. For example, placing a <div> inside a <span> is usually not appropriate because <span> is intended as an inline container.

Common Use Cases

• Use block elements for structure: page sections, paragraphs, lists, tables, and major content containers.
• Use inline elements for small content inside text, like links, emphasis, icons, and small labels.
• Use inline-block when you want items to sit next to each other but still behave like boxes.

Best Practices

• Use elements according to their meaning first, then adjust display with CSS if needed.
• Do not rely only on default display behavior when building larger layouts; use CSS intentionally.
• Keep inline elements for short content and block elements for structural content.
• Use semantic block elements like <section>, <article>, and <header> where appropriate.