Show or Hide: Mastering Visibility and Display in CSS

Master the art of hiding and showing elements. Learn the critical difference between visibility: hidden and display: none to control your layout perfectly.

Hello! Today we'll explore two ways to hide elements in CSS: `display` and `visibility`.

/* Three boxes, all in a row. */

The Disappearing Act: 'display: none'

The display: none; property is the ultimate disappearing act. It completely **removes the element from the document flow**. It's as if the element never existed—it takes up no space, and other elements collapse to fill the void.

The Cloak of Invisibility: 'visibility: hidden'

With visibility: hidden;, the element becomes invisible, but it still **occupies its original space** in the layout. Think of it as a ghost element—you can't see it, but its reserved spot prevents other elements from moving into its place.

Impact on Document Layout

The key difference lies in the **layout**. Use display: none when you want the layout to reflow and reclaim the space. Use visibility: hidden when you need to maintain the layout structure, even when an element is hidden.

When to Use Which?

display: none is ideal for mobile navigation menus or dynamically adding/removing content. visibility: hidden is great for creating visual effects without causing layout shifts, such as revealing an item on hover.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

visibility

display

Completa el código:

Removes the element and reclaims its space.______: none;

Hides the element but preserves its space.______: hidden;

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.hide-and-remove {
  : none;
}
.hide-and-keep-space {
  : hidden;
}

Unlock with Premium

Practice Example: Code Editor

In the editor, make the first box (`.box-1`) disappear completely, and make the second box (`.box-2`) invisible while keeping its space.

Using visibility and display

Property	Description
visibility	Controls the visibility of the element. 'visible' shows the element, 'hidden' hides it but it still takes up space.
display	Controls how an element is displayed on the page. 'block' and 'inline' are the most common.
display: none	Completely hides the element; it does not take up space in the layout.
display: block	The element is displayed as a block, taking up the full available width.
display: inline	The element is displayed inline, taking up only the necessary width.

* Write your CSS code and apply it to see the results.

Results:

Unlock with Premium

Knowledge Check

Which property hides an element but keeps its space in the layout?

Unlock with Premium

← Previous Next →

Practical Applications of Visibility

Choosing between display and visibility has a real impact on user experience and accessibility. Let's explore some common scenarios.

1. Accessible Tooltips with `visibility`

For tooltips, using visibility: hidden and toggling it to visible on hover is often better than `display: none`. This keeps the element in the accessibility tree, making it available to screen readers, and avoids layout shifts.

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

2. Collapsible Sections with `display`

When creating an accordion or a collapsible section, display: none is the right choice. When the content is hidden, you want the layout to collapse, saving valuable screen space.

input:checked ~ .content {
  display: block;
}

Click to expand

Accessibility Tip: Elements with display: none are ignored by screen readers. Elements with visibility: hidden are also typically ignored, but their content can still be read if focus is moved to them via JavaScript. For fully accessible hiding, use a "visually-hidden" class that moves the element off-screen.