Visibility and Hide

By the end of this lesson, you will be able to choose between visibility: hidden and display: none to hide CSS elements while controlling whether the page layout keeps or collapses the hidden space.

What it is

CSS hiding controls two separate things: whether an element is visible, and whether it still takes up layout space. visibility: hidden makes an element invisible but keeps its box in the layout, so surrounding content does not move. display: none removes the element from the layout entirely, so its space collapses and following content moves up.

Related terms include opacity: 0, the HTML hidden attribute, aria-hidden, focusability, and reflow. Use visibility when you want a placeholder; use display when you want removal.

Why it matters

• Prevents layout jumps when showing or hiding tooltips, menus, or validation messages.
• Removes collapsed sections cleanly when space should be reclaimed.
• Helps you reason about accessibility: hidden elements may not be focusable or announced.
• Supports smoother visual effects when combined with transitions.
• Keeps page structure predictable when content changes dynamically.

Syntax or steps

1. Select the element you want to hide.
2. Use visibility: hidden; to hide it while keeping its space.
3. Use display: none; to hide it and remove its space.
4. Test with surrounding content to confirm whether the layout moves.

Example

<!doctype html>
<html>
<head>
<style>
.box {
  width: 120px;
  height: 60px;
  margin: 8px;
  border: 1px solid #333;
  background: #eee;
}

.ghost {
  visibility: hidden;
}

.gone {
  display: none;
}
</style>
</head>
<body>
<p>Before</p>
<div class="box ghost">Ghost</div>
<p>After</p>
<div class="box gone">Gone</div>
<p>End</p>
</body>
</html>

• The .ghost box is invisible, but the gap between Before and After remains.
• The .gone box disappears completely, so End moves up.
• The surrounding paragraphs make the layout difference easy to see.

Common mistakes

• Assuming visibility: hidden removes the element from the page. It does not; it only hides it visually.
• Forgetting that a child can override a hidden parent with visibility: visible.
• Using display: none when you need to reserve space, causing content to jump.
• Using opacity: 0 as a hiding method without considering that the element may still be focusable or clickable.

When to use it

Practice

Guided exercise: Create two boxes with the same size. Apply visibility: hidden to one and display: none to the other. Observe which one leaves a gap.

Challenge: Hide a tooltip below a button without moving the button. Hint: use visibility: hidden on the tooltip and visibility: visible on hover.

Quick check

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

visibility: hidden.

Summary

visibility: hidden hides content while preserving layout space. display: none removes content from the layout entirely. Choose based on whether the hidden element should still reserve room on the page.