First Blog about My First Blog — on display

Eight years ago, fresh out of my first dev job, I wrote my very first blog post. It was about the CSS display property — inline, inline-block, and block. I wrote it mostly to solidify my own understanding. Nothing fancy.

That post did surprisingly well.

So it felt right that the first post on this new blog revisits that same topic. Fundamentals never go out of style — and this one still trips people up more than it probably should. Let's get into it.

Why This Still Matters in 2026#

You might be thinking — don't we just use flexbox and grid for everything now?

Yes, mostly. But every HTML element comes with a default display value baked in. If you don't know what those defaults are, you'll spend time fighting CSS instead of writing it. Know your defaults — it pays off every single time.

The Three You Need to Know#

Inline#

Common examples: <span>, <a>, <strong>, <img>

Inline elements flow with the text around them — they sit side by side, like words in a sentence. When the line runs out of space, they wrap to the next line.

Here's the part that catches people off guard:

span {
  width: 200px; /* ignored */
  height: 50px; /* ignored */
  margin-top: 20px; /* ignored */
}

Inline elements do not respect width, height, or vertical margins. They're sized entirely by their content. You set a width, nothing happens, you think the CSS is broken. It's not — you're just working against the element's nature.

Inline-block#

Common examples: <input>, <button>, <select>, <textarea>

inline-block is the best of both worlds. Elements sit side by side like inline — but they do respect width, height, and vertical margins.

button {
  display: inline-block;
  width: 150px; /* works */
  height: 40px; /* works */
  margin-top: 12px; /* works */
}

This is why <button> and <input> behave the way they do out of the box. They need to line up with text and be sized precisely. inline-block is the right tool for that.

Block#

Common examples: <div>, <p>, <h1>–<h6>, <section>

Block elements always start on a new line and stretch to fill the full width of their container — even if their content is just a few words.

div {
  width: 100%; /* full width by default */
  display: block; /* this is what's doing it */
}

Nothing sits next to a block element unless you override its display. They own the whole row — that's the whole point of them.

The Nesting Rule Nobody Talks About Enough#

This one matters and most tutorials skip it.

Think of containment as big to small:

• ✅ Block can contain block, inline-block, and inline
• ✅ Inline-block can contain inline
• ❌ Inline should not contain block elements

<!-- Bad — inline wrapping a block -->
<span>
  <div>This causes rendering issues</div>
</span>
 
<!-- Good — block wrapping inline -->
<div>
  <span>This is perfectly fine</span>
</div>

Browsers will try to recover from invalid nesting but the results are unpredictable. Don't rely on it.

You Can Always Override#

The default display value is just a starting point. CSS lets you change it:

/* Make a div behave like inline */
div {
  display: inline;
}
 
/* Make a span behave like block */
span {
  display: block;
}

Want your nav links to stack vertically on mobile? display: block. Want block-level elements to flow side by side? display: inline-block — or just reach for flexbox at that point.

Quick Reference#

The Honest Takeaway#

I still think about these three values when something isn't laying out the way I expect. Not because I forgot — but because they're the foundation everything else is built on top of.

Flexbox and grid are incredible. But they don't replace understanding what you're working with at the element level. A lot of CSS frustration comes from fighting default behavior instead of knowing it.

If you're just starting out, sit with this one until it clicks. If you've been doing this a while — it never hurts to revisit. Clearly I'm still doing it, eight years later.

Thanks for reading. More to come. 🙂