Stop 03 · CSS3Topics · 6/17

Display

In short

Why does width do nothing on a <span>? Why do two divs refuse to sit side by side? The display property is the answer to half these mysteries.

The `display` property (`block`, `inline`, `inline-block`, `flex`, `grid`, `none`) determines how an element generates boxes and participates in layout. Understanding display modes explains why elements occupy space differently, how formatting contexts are created, and why changing `display` can completely alter layout behavior.

The jaadu mascot stands between stacked train sleeper berths and a row of side-by-side bus seats.

Think of it like this

Seats on a bus vs a sleeper berth

A sleeper berth takes the full width, so the next one goes below it. That's block. Bus seats sit side by side in a row. That's inline. And inline-block is a bus seat that you're allowed to resize.

Watch it happen

block vs inline

block

Starts on a new line
Takes the full width
Respects width and height

inline

Flows inside a line of text
Only as wide as its content
Ignores width and height

Need a box you can size but that sits in a line? Use inline-block, or flex on the parent.

The big ideas

What you need to know

block

Starts on a new line and takes the full width. div, p, h1 and section are block by default.

inline

Flows with the text. Width, height and top/bottom margins are ignored. span, a and strong are inline.

inline-block

Sits in a line like inline, but respects width, height and padding like block.

none vs hidden

display: none removes the element from the layout. visibility: hidden hides it but keeps its space.

See it in code

Walk through the code

css

1/* Make links behave like proper buttons */2.btn {3  display: inline-block;4  padding: 0.6rem 1.2rem;5  width: 160px;            /* works now */6  text-align: center;7}8 9/* Hide on small screens, show on bigger ones */10.desktop-only { display: none; }11@media (min-width: 768px) {12  .desktop-only { display: block; }13}14 15.grid { display: grid; }   /* also flex, inline-flex, contents... */

1/3inline-block keeps the link in a line but lets width and padding work.

display also switches on Flexbox and Grid, which you've already seen. It's the one property that decides how an element joins the layout.

Save yourself the pain

Common mistakes

Oops

Setting width and height on a <span> and seeing nothing change.

Do this instead

Inline elements ignore width and height. Switch to inline-block or block.

Oops

Using visibility: hidden and wondering why there's a blank gap.

Do this instead

visibility keeps the space. Use display: none to remove the element completely.

Your mission

Display swap test

~15 min

Quick check

You want a hidden dropdown to take up no space at all until it opens. Which do you use?

Go deeper

1Compare how `block` vs `inline` vs `inline-block` elements size and wrap. Write down when you would choose each option and what trade-off drives that choice.
2Learn why `display: none` removes an element from layout entirely, unlike `visibility: hidden`. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Practice switching a nav from `flex` to `none` at different breakpoints.