0Pricing
CSS Academy · Lesson

Visibility vs Display None

Learn when to use visibility: hidden versus display: none and how each affects layout.

Three Ways to Hide Elements

CSS provides three common methods to hide elements, each with different effects on layout, accessibility, and interaction:

  1. display: none
  2. visibility: hidden
  3. opacity: 0

display: none

The element is completely removed from layout. It occupies no space, is not interactive, and is not read by screen readers (for most implementations). The element still exists in the DOM.

.hidden {
  display: none;
  /* element disappears from layout */
}

All lessons in this course

  1. Block vs Inline vs Inline-Block
  2. Visibility vs Display None
  3. Overflow: Scroll Clip and Auto
  4. CSS Reset and Normalize
← Back to CSS Academy