CSS Display

The display property might be the single most important property in all of CSS, because it decides how an element behaves in the overall layout: whether it stacks on its own line, sits inline with text, or becomes a container that arranges its own children in a completely different way. block elements (like div and p) stack vertically and take up their own full line. inline elements (like span and a) flow within text and can't have their width or height directly set. inline-block blends the two, flowing like inline but accepting width and height like block. display: none removes an element from the page entirely. And flex and grid turn an element into a powerful layout container for arranging its children. Understanding display is the foundation for building any real layout on a site like cookiescursor.com, since it controls the basic behavior every single element starts from.

In this page:

block, inline, and inline-block
display: none
display: none vs visibility: hidden
display: flex
display: grid

block, inline, and inline-block

block elements take up the full width available and always start on a new line. inline elements flow within surrounding text and only take up as much width as their content needs. inline-block behaves like inline for flow, but accepts width, height, and vertical margin like a block element.

Note: If you need an element to sit beside other content but still needs a set width or height, inline-block is often exactly what you want.

Warning: Width and height declarations on a true inline element are simply ignored by the browser.

Example: block, inline, and inline-block

css

<style>
.block {
  display: block;
  background: dodgerblue;
  color: white;
  padding: 6px;
}
.inline {
  display: inline;
  background: coral;
  color: white;
  padding: 6px;
}
.inline-block {
  display: inline-block;
  width: 100px;
  background: mediumseagreen;
  color: white;
  padding: 6px;
}
</style>
<div class="block">Block</div>
<span class="inline">Inline</span>
<span class="inline-block">Inline-block</span>

display: none

display: none removes an element from the page entirely, both visually and from the document's layout flow, as if it were never there at all.

Note: display: none is commonly toggled with JavaScript to show or hide content dynamically, like an expandable FAQ answer.

Warning: An element hidden with display: none is also removed from most assistive technology, so make sure hidden content really should be fully inaccessible.

Example: display: none

css

<style>
.hidden {
  display: none;
}
</style>
<p>Visible paragraph</p>
<p class="hidden">Removed from layout entirely</p>

display: none vs visibility: hidden

display: none removes an element and its space from the layout entirely. visibility: hidden makes an element invisible but still keeps its space reserved on the page, as if an invisible box were still sitting there.

Note: Use visibility: hidden when you want to preserve layout position (like avoiding a jump when content loads), and display: none when you want the element truly gone.

Warning: Because visibility: hidden still reserves space, it can be surprising if you were expecting the layout to collapse the same way display: none does.

Example: display: none vs visibility: hidden

css

<style>
.gone {
  display: none;
}
.invisible {
  visibility: hidden;
}
</style>
<p class="gone">Gone, no space reserved</p>
<p class="invisible">Invisible, space reserved</p>
<p>Next element</p>

display: flex

Setting display: flex on a container turns it into a flex container, giving you powerful, simple tools for arranging its direct children in a row or column, with easy control over alignment and spacing.

Note: flex is an excellent default choice for arranging a handful of items, like a navigation bar or a row of cards, in a single direction.

Warning: display: flex only affects the direct children of the container it's applied to, not deeply nested grandchildren further down the tree.

Example: display: flex

css

<style>
.container {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.container div {
  background: dodgerblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

display: grid

Setting display: grid on a container turns it into a grid container, letting you lay out its children into a genuine two-dimensional grid of rows and columns, ideal for more complex page layouts.

Note: Reach for grid when you need to control both rows and columns at once, like a card layout that needs to wrap into a fixed number of columns.

Warning: Grid and flex solve overlapping but different problems, grid excels at two-dimensional layouts, while flex is usually simpler for a single row or column.

Example: display: grid

css

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>1</div>
  <div>2</div>
</div>

Common Mistakes

Trying to set width and height on an inline element and being confused when nothing happens.
Confusing display: none (removes the element entirely) with visibility: hidden (hides it but keeps its space).
Reaching for float-based layouts out of habit instead of using flex or grid for modern layout needs.

Chapter Summary

block elements stack on their own line; inline elements flow within text and ignore width/height.
inline-block combines inline flow with block-style sizing control.
display: none removes an element and its space entirely; visibility: hidden hides it but keeps its space reserved.

Browser Support

All standard CSS display values covered here, including flex and grid, are supported by every modern browser.

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Tables Next Lesson → CSS Hide Elements