What is the difference between display: none and visibility: hidden?

Core Differences

Property	display: none	visibility: hidden	opacity: 0
Visible	❌ No	❌ No	❌ No
Occupies space	❌ No	✅ Yes	✅ Yes
Triggers events	❌ No	❌ No	✅ Yes (clickable)
Triggers Reflow	✅ Yes	❌ No	❌ No
Child override	—	✅ Possible	❌ Not possible

display: none

.hidden {
  display: none;
}

• Completely removes the element from the document flow — takes up no space
• Triggers a Reflow (layout recalculation) when toggled — higher performance cost
• Child elements cannot override this even with display: block

visibility: hidden

.hidden {
  visibility: hidden;
}

• Element becomes invisible but still occupies its original space
• Does not trigger Reflow — better performance
• Child elements can override with visibility: visible

opacity: 0 (Bonus)

.hidden {
  opacity: 0;
}

• Element is fully transparent but still receives pointer events (clicks)
• Does not trigger Reflow, and works well with transition for fade animations

When to Use Each

• display: none: Fully remove from layout — collapsed menus, tab switching
• visibility: hidden: Hide but preserve space — placeholders, reserved areas
• opacity: 0: Fade-in/out animations with transitions