Visibility & Hiding

Hide elements in different ways.

Syntaxvisibility: hidden; display: none;

There are several ways to hide an element, each with a different effect:

MethodTakes up space?
display: noneNo
visibility: hiddenYes
opacity: 0Yes (still clickable)

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • A developer uses visibility: hidden on a tooltip to hide it while keeping its space in the layout, preventing surrounding elements from jumping.
  • A designer uses opacity: 0 with transition on a hover overlay so it fades in smoothly without removing it from layout flow.
  • A developer uses display: none to remove an error message from the page entirely after it is dismissed, reclaiming its space.

More examples

visibility hidden versus display none

Contrasts visibility: hidden (preserves layout space) with display: none (removes the element from flow entirely).

Example · css
.placeholder {
  visibility: hidden; /* hidden but still takes space */
}

.removed {
  display: none;      /* removed from flow, no space */
}

Opacity zero for animated hide

Uses opacity: 0 with transition to fade a tooltip in and out while keeping its layout position, avoiding reflow.

Example · css
.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

Screen-reader-only content

The standard utility class that hides content visually but keeps it accessible to screen readers and keyboard navigation.

Example · css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Related

css display

Discussion

  • Be the first to comment on this lesson.