DEV Community

sugaiketadao
sugaiketadao

Posted on

CSS Blocks and Inlines — What I Wish I'd Known on Day One

#css #html #webdev #beginners

Introduction

"I set a width but nothing changed." "The top and bottom margin isn't doing anything." "I just want these elements side by side but it's not working."

If you've spent time staring at CSS that refuses to cooperate, there's a good chance the root cause was the difference between block and inline elements — and that knowing this one concept would have resolved most of those issues instantly.

Here's why it matters:

  • You can immediately understand why a CSS rule isn't taking effect
  • You know exactly where to look to fix it
  • You know what to check in the browser DevTools

Not knowing this means hours of trial and error. Past-me knows this all too well.

Block vs. Inline — The Short Version

Every HTML element has a default display behavior: it's either block or inline.

Block elements Inline elements
Layout direction Stack vertically Flow horizontally
Width Stretches to fill the parent Shrinks to fit content
width / height Works Does not work
margin (top/bottom) Works Does not work
padding (top/bottom) Works Visually expands, but doesn't push adjacent elements
line-height Works Works
Common tags <div> <p> <h1>–<h6> <ul> <li> <table> <span> <a> <strong> <em>

Block Elements 

<div>div (block)</div>
<div>div (block)</div>
Enter fullscreen mode Exit fullscreen mode 
┌────────────────────────────────────┐
│ div (block)                        │
└────────────────────────────────────┘
┌────────────────────────────────────┐
│ div (block)                        │
└────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

<div> is a block element by default. Without any CSS, it stretches to fill the full width of its parent and pushes the next element below it.

width, height, margin, and padding all work exactly as you'd expect.

Inline Elements 

<span>span (inline)</span>
<span>span (inline)</span>
Enter fullscreen mode Exit fullscreen mode 
┌─────────────────────┐┌─────────────────────┐
│ span (inline)        ││ span (inline)        │
└─────────────────────┘└─────────────────────┘
Enter fullscreen mode Exit fullscreen mode

<span> is an inline element by default. It flows horizontally alongside other content and only takes up as much width as its content needs.

CSS That Doesn't Work on Inline Elements 

span {
  width: 200px;        /* No effect */
  height: 100px;       /* No effect */
  margin-top: 20px;    /* No effect */
  margin-bottom: 20px; /* No effect */
  padding-top: 20px;   /* Visually expands, but doesn't push neighbors away */
  line-height: 2;      /* Works — line-height applies to inline elements */
}
Enter fullscreen mode Exit fullscreen mode

This is the root cause of most "why isn't this CSS working?!" moments.

Switching Display with the display Property

The display mode can be changed with the CSS display property. This is the key to resolving most of the issues above.

Make an inline element respond to size and vertical margin → display: block 

a {
  display: block;
  width: 200px;
  margin-top: 20px; /* Now works */
}
Enter fullscreen mode Exit fullscreen mode

Commonly used to expand the clickable area of a link beyond its text.

Make block elements flow side by side while keeping size control → display: inline-block 

div {
  display: inline-block;
  width: 100px;
  height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

inline-block gives you the best of both worlds: elements flow horizontally (like inline), but width and height are respected (like block).

┌──────────┐┌──────────┐
│   div    ││   div    │
│ 100×100  ││ 100×100  │
└──────────┘└──────────┘
Enter fullscreen mode Exit fullscreen mode

Common Traps

Trap 1: Setting width on a <span> has no effect 

/* ❌ span is inline — width is ignored */
span {
  width: 200px;
}
Enter fullscreen mode Exit fullscreen mode 
/* ✅ Change the display mode */
span {
  display: inline-block; /* or block */
  width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Trap 2: <a> tags have a tiny click area

Navigation links where only the text itself is clickable:

/* ❌ Padding doesn't push neighboring elements */
a {
  padding: 10px 20px;
}
Enter fullscreen mode Exit fullscreen mode 
/* ✅ Make the padding work properly */
a {
  display: block; /* or inline-block */
  padding: 10px 20px;
}
Enter fullscreen mode Exit fullscreen mode

Trap 3: Trying to place <div> elements side by side 

/* ❌ div is block — elements stack vertically */
div {
  width: 100px;
}
Enter fullscreen mode Exit fullscreen mode 
/* ✅ Option 1: inline-block */
div {
  display: inline-block;
  width: 100px;
}
Enter fullscreen mode Exit fullscreen mode 
/* ✅ Option 2: flexbox on the parent (the modern approach) */
.parent {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Flexbox handles horizontal layout, centering, and even spacing distribution. If you're learning CSS today, prioritize flexbox over inline-block — it covers almost everything you'd want for modern layouts.

Check It in DevTools

You can confirm any element's display value instantly in the browser's developer tools (F12):

  1. Right-click the element → "Inspect"
  2. Open the Computed tab on the right
  3. Search for or find display

Once you see "display: inline — that's why width isn't working," you know exactly what to fix.

Quick Reference 

display: block        → Stacks vertically. width/height/margin all work.
display: inline       → Flows horizontally. width/height/vertical margin don't work.
display: inline-block → Flows horizontally AND width/height work.
display: flex         → Flexible layout for children. The modern standard.
Enter fullscreen mode Exit fullscreen mode

Whenever a CSS rule doesn't seem to apply to a new element, make it a habit to ask: "What is this element's default display value?" That single question will dramatically speed up your debugging.

Wrapping Up

Block vs. inline feels like a minor detail at first. But knowing the distinction changes how fast and how confidently you work with CSS.

I think back to the time I spent wondering "why isn't this working?" — and I wish I'd had this explanation then.

Next time a width doesn't seem to apply or elements refuse to go side by side, come back to the table at the top of this article. The answer is almost certainly there.

SIcore Framework Links

I've published a Java framework designed for SI projects, built so that even junior programmers can develop business applications with ease. The HTML, CSS, JavaScript, and Java structure is cleanly organized, and you can learn by running the sample code.

Related Articles

Check out the other articles in this series!

Thank you for reading!
I'd appreciate it if you could give it a ❤️!

Top comments (0)