Skip to content
Laviyx Learn

Try

CSS course menu

CSS display: block, inline, inline-block, none, flex and grid

Learn the CSS display property with live examples: block, inline and inline-block boxes, hiding elements with display none versus visibility hidden, and an introduction to flex and grid layouts.

Beginner5 min readUpdated
On this page

The display property controls how an element's box behaves: whether it starts on a new line, whether it accepts a width, and how it lays out its children.

block, inline and inline-block#

CSS
span, div { background: #cfe3ff; border: 1px solid #2f5fe0; padding: 4px; margin: 4px; }
.as-block { display: block; }
.as-inline { display: inline; width: 200px; }        /* width is ignored */
.as-inline-block { display: inline-block; width: 140px; }
HTML
<span class="as-block">block span</span>
<div class="as-inline">inline div</div>
<div class="as-inline">inline div</div>
<span class="as-inline-block">inline-block</span>
<span class="as-inline-block">inline-block</span>
Result
ValueNew line?Accepts width and height?Vertical margin and padding push other content?
blockYes, fills the widthYesYes
inlineNo, flows in textNoNo
inline-blockNo, flows in textYesYes

A common use: links in a menu are inline by default, so their padding does not take up vertical space. display: inline-block (or block) gives them a proper clickable box.

Hiding elements#

CSS
.box { display: inline-block; width: 70px; padding: 8px; background: #c9f0d3; text-align: center; }
HTML
<div class="box">A</div>
<div class="box" style="display: none">B</div>
<div class="box">C</div>
<br>
<div class="box">A</div>
<div class="box" style="visibility: hidden">B</div>
<div class="box">C</div>
Result
MethodVisible?Keeps its space?Read by screen readers?
display: noneNoNoNo
visibility: hiddenNoYesNo
opacity: 0No (transparent)YesYes, and still clickable

To hide something visually but keep it available to screen readers (for example, extra context for a link), developers use a "visually hidden" utility class rather than any of these.

Layout values: flex and grid#

display also switches on modern layout systems for an element's children:

CSS
.flex { display: flex; gap: 8px; margin-bottom: 12px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.flex div, .grid div { background: #fde7c8; padding: 8px; text-align: center; }
HTML
<div class="flex"><div>Flex 1</div><div>Flex 2</div><div>Flex 3</div></div>
<div class="grid"><div>Grid 1</div><div>Grid 2</div><div>Grid 3</div><div>Grid 4</div></div>
Result
  • display: flex lays children out in a row or column (Flexbox).
  • display: grid lays children out in rows and columns (CSS Grid).
  • inline-flex and inline-grid do the same, while the container itself flows inline.

Other values you will meet#

ValueMeaning
list-itemThe default for <li>: a block with a marker
table, table-row, table-cellTable layout behaviour
contentsThe element's own box disappears; its children behave as if they were children of its parent
flow-rootA block that contains its floats and stops margin collapsing through it

Practice#

Practice exercise

Turn this list of links into a horizontal menu of buttons: remove the bullets, show the items in a row, and give each link a padded, clickable box with a background.

HTML
<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">Contact</a></li>
</ul>
Show solution
CSS
.menu { list-style: none; padding: 0; margin: 0; }
.menu li { display: inline-block; }
.menu a {
  display: inline-block;
  padding: 8px 14px;
  background: #2f5fe0;
  color: white;
  text-decoration: none;
  border-radius: 6px;
}
HTML
<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">Contact</a></li>
</ul>
Result

With Flexbox you could write .menu { display: flex; gap: 8px; } instead of making the items inline-block.

Key takeaway#

Finished this lesson?

Related lessons

CSSThe CSS Box Model: Content, Padding, Border and MarginUnderstand the CSS box model with visual examples: content, padding, border and margin, how they add up to an element's size, how to inspect boxes in developer tools, and margin collapsing.Beginner5 min readCSSCSS Flexbox: A Complete Beginner's Guide with ExamplesLearn CSS Flexbox with live examples: flex containers and items, flex-direction, main and cross axes, justify-content, align-items, flex-wrap, gap, align-content, and common layouts such as navbars, card rows and sticky footers.Intermediate7 min readCSSCSS Grid Layout: A Complete Beginner's Guide with ExamplesLearn CSS Grid with live examples: grid containers, grid-template-columns and rows, the fr unit, repeat(), gap, minmax(), auto-fit and auto-fill for responsive grids without media queries, spanning cells, and aligning grid items.Intermediate6 min readHTMLBlock and Inline Elements in HTML: div and span ExplainedUnderstand block-level and inline elements in HTML: how they flow on the page, which elements are which, the generic div and span containers, and how CSS display changes an element's box.Intermediate4 min read