display: block, inline, inline-block

In 2026 — don't reach for inline-block to lay things out

If you arrived from an older tutorial, you may have learned that inline-block is how you make cards sit in a row. In modern CSS that's wrong: flex / grid (next module) own multi-item layout. inline-block is now only useful for *inline pieces inside text* — chips, badges, the occasional pill-button-inside-paragraph. Keep this lesson in mind for those — and only those — situations.

The 3 oldest display values

.thing { display: block; }         /* full-width, stacks vertically */
.thing { display: inline; }        /* sits in text flow, IGNORES width/height */
.thing { display: inline-block; }  /* flows like inline, but accepts width/height/padding */

What each does

<div>, <p>, <h1>, <section> are block by default. <span>, <a>, <strong>, <em> are inline by default.

When to use inline-block

The classic case: a "button" inside a paragraph that needs padding/width but should sit inline:

<p>Click here: <a class="btn" href="#">Sign up</a> to continue.</p>

.btn {
  display: inline-block;
  padding: 8px 16px;
  background: #3B82F6;
  color: white;
}

If .btn were just display: inline (its default), the padding would render but the background would only cover the text-line height — looks broken. inline-block makes the padding apply to the box properly.

Modern alternatives

• For LAYOUT (rows of cards): use flexbox or grid (next module). Don't use inline-block for layout in 2026.
• For inline buttons/badges/chips: inline-block is still the right call.