visibility: hidden vs display: none — what's the difference?

visibility: hidden and display: none are two ways to hide an element in CSS, but they work differently and have different consequences for the page layout.

Key Differences

display: none

• Element is completely removed from document flow
• Does not take up space on the page
• Does not affect positioning of other elements
• Not accessible to screen readers (usually)
• Cannot animate transition between display: none and display: block

visibility: hidden

• Element remains in document flow
• Takes up space on the page (invisible)
• Affects positioning of other elements (leaves empty space)
• Not accessible to screen readers
• Can be animated via the visibility property

Visual Comparison

<div class="container">
  <div class="box">Box 1</div>
  <div class="box hidden-display">Box 2 (display: none)</div>
  <div class="box">Box 3</div>
</div>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box hidden-visibility">Box 2 (visibility: hidden)</div>
  <div class="box">Box 3</div>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
}

.hidden-display {
  display: none;
}

.hidden-visibility {
  visibility: hidden;
}

Result:

• With display: none: Box 2 completely disappears, Box 3 shifts to Box 2's position
• With visibility: hidden: Box 2 is invisible but its space remains empty, Box 3 does not shift

When to Use display: none

Use display: none when:

1. Element is not needed in layout: For example, hiding modal windows when they are not open
2. Need to completely remove element: For mobile menus that should only appear on click
3. Performance optimization: When element contains a lot of content that is not needed

/* Modal window */
.modal {
  display: none;
}

.modal.active {
  display: block;
}

/* Mobile menu */
.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
}

When to Use visibility: hidden

Use visibility: hidden when:

1. Need to preserve space in layout: For elements that are temporarily hidden but should preserve their space
2. Appear/disappear animations: When you need to smoothly show/hide an element
3. Hiding without changing layout: When hiding should not affect positioning of other elements

/* Smooth appear/disappear */
.fade-element {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

.fade-element.show {
  visibility: visible;
  opacity: 1;
}

/* Preserving space for hidden content */
.tooltip {
  visibility: hidden;
  position: absolute;
}

.tooltip:hover {
  visibility: visible;
}

Combination with Other Properties

opacity: 0

.invisible-opacity {
  opacity: 0;
  /* Element is invisible but takes up space and remains interactive */
}

Difference:

• opacity: 0 — element is invisible but remains interactive (can be clicked)
• visibility: hidden — element is invisible and not interactive

position: absolute + left: -9999px

.sr-only {
  position: absolute;
  left: -9999px;
  /* Element is visually hidden but accessible to screen readers */
}

This method is used to hide elements from view but keep them accessible to screen readers.

Comparison Table

Practical Example

/* Card with smooth appearance */
.card {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
}

.card.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Completely hidden element (does not take up space) */
.hidden {
  display: none;
}