Difference between visibility: hidden and display: none

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

html

<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>

css

.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:

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

css

/* 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:

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

css

/* 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

css

.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

css

.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

Property	Takes up space	Interactive	Accessible to screen readers	Can be animated
`display: none`	No	No	No	No
`visibility: hidden`	Yes	No	No	Yes
`opacity: 0`	Yes	Yes	Yes	Yes

Practical Example

css

/* 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;
}

Important:

Choose the hiding method based on your needs: use display: none for complete removal from layout, visibility: hidden to preserve space, and opacity: 0 if element should remain interactive.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems