CSS Display

Control how a box behaves: block, inline, inline-block, none, flex, grid.

Lesson 16 of 49Beginner12 min read

In the HTML course you learned that some elements are block and some are inline. The CSS display property lets you change that behaviour. You can turn a link into a block, line a list up in a row, or hide something completely. display is also the switch that turns on Flexbox and Grid, the two main layout systems in CSS.

Because it changes how an element takes up space, display affects everything around it too. Understanding its main values explains why a width you set seems to be ignored, or why an element suddenly jumps onto its own line.

The main display values

ValueBehaviour
blockStarts on a new line, fills the full width, respects width, height and all margins
inlineFlows with the text, ignores width, height and top and bottom margins
inline-blockFlows with the text but respects width, height and all spacing
noneRemoved from the page completely
flexBecomes a Flexbox container
gridBecomes a Grid container

Every element has a default display value set by the browser. <div> and <p> are block, while <a> and <span> are inline. CSS lets you override that default without changing the HTML.

inline vs inline-block

Inline elements like <a> and <span> ignore width, height and vertical margins. That's why vertical padding on a link can overlap the lines of text above and below it.

Switch the element to inline-block and it behaves like a small box that still sits in the line of text. That's ideal for buttons, tags and badges, which need padding on all sides but shouldn't force a line break.

Ways to hide an element

CSSVisible?Takes up space?Read by screen readers?
display: noneNoNoNo
visibility: hiddenNoYesNo
opacity: 0NoYesYes

The HTML hidden attribute has the same effect as display: none. Choose based on what you need: display: none for content that shouldn't exist right now, visibility: hidden to keep the layout from shifting, and opacity when you plan to fade the element in with a transition.

CSS Display Syntax

Display values

a.button { display: inline-block; }
.menu { display: flex; }
.gallery { display: grid; }
.hidden { display: none; }

CSS Display Summary

  • display controls how an element takes up space on the page.
  • block starts a new line; inline flows within text.
  • inline-block flows within text but respects width, height and spacing.
  • display: none removes an element; visibility: hidden hides it but keeps its space.
  • display: flex and display: grid turn on the two main layout systems.

CSS Display Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

block, inline and inline-block

All three spans get the same width, height and margin. Only two of them listen.

span {
  width: 120px;
  height: 40px;
  margin: 10px;
  padding: 4px;
  background: #ffd23f;
  border: 2px solid #15161b;
}

.i  { display: inline; }
.ib { display: inline-block; }
.b  { display: block; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 4Everyone gets the same size and spacing.
  2. Line 10Inline ignores width, height and vertical margin.
  3. Line 11Inline-block respects them but stays in the line.
  4. Line 12Block takes its own line.
Example 2

Turning links into button-like tabs

.tabs a {
  display: inline-block;
  padding: 10px 18px;
  margin-right: 4px;
  border-radius: 10px 10px 0 0;
  background: #e5e7eb;
  color: #15161b;
  text-decoration: none;
}

.tabs .active {
  background: #4467ff;
  color: white;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2inline-block lets the padding and rounded corners work properly.
  2. Lines 11 to 14The active tab stands out.
Example 3

none vs hidden

.box { display: inline-block; width: 50px; padding: 10px 0; text-align: center; background: #d6f4e4; border: 2px solid #17a865; }

.gone { display: none; }
.ghost { visibility: hidden; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3Box 2 is removed, so box 3 slides into its place.
  2. Line 4Box 2 is invisible but still holds its space.

Common CSS Display Mistakes

Setting width on an inline element

Don't
a.btn { width: 200px; height: 50px; }
Do
a.btn { display: inline-block; width: 200px; height: 50px; }

Links are inline, so width and height are ignored until you change display.

Hiding content with display: none that should stay accessible

Don't
.label-text { display: none; } /* screen readers can't read it either */
Do
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

To hide something visually but keep it for screen readers, use a "visually hidden" class like this one.

CSS Display in Real Projects

Display everywhere

Navigation bars (flex), photo galleries (grid), pill-shaped tags (inline-block) and mobile menus that open and close (none ↔ block) all rely on display. It's one of the most used properties in every stylesheet.

CSS Display Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Let the link accept width and padding while staying in line.

.tag {
  display: ;
  padding: 4px 10px;
}
Multiple choiceeasy

Which value removes an element from the page completely?

Multiple choicemedium

What's the difference between display: none and visibility: hidden?

Fix the bugmedium

The three .chip links should sit in a row, each 100px wide with 8px padding, and the .secret paragraph should be removed from the layout. Fix the CSS.

.chip {
  display: block;
  width: 100px;
  padding: 8px;
  background: #eee;
}

.secret {
  visibility: hidden;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Chips sit side by side
  • Chips are 100px wide (plus padding)
  • The secret is removed from the layout

CSS Display Quiz

3 questions to check what you learned.

  1. Which display value makes an element a Flexbox container?

    • flex
    • block
    • inline
    • box

  2. Does width work on an element with display: inline?

    • Yes
    • Only in percentages
    • No
    • Only on links

  3. Which hidden element is still announced by screen readers?

    • display: none
    • visibility: hidden
    • The hidden attribute
    • opacity: 0

CSS Display Challenge

Make a badge row

Without changing the HTML:

  1. Make every .badge an inline-block with padding: 6px 12px and a margin-right of 6px
  2. Hide the .old badge completely with display: none
.badge { background: #fff1c2; border: 2px solid #15161b; border-radius: 999px; font: 600 14px sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Badges are inline-block
  • Padding 6px 12px
  • 6px right margin
  • Old badge is gone

Related CSS topics

14Box ModelEvery element is a box. Learn how its size really works.19FlexboxLine things up in rows or columns, space them out and centre anything.20GridTwo-dimensional layouts with rows, columns, fr units and named areas.23Div, Span & Block/InlineWhy some elements stack and others flow, and the two generic containers.
Esc
↑↓ to navigateEnter to open