visibility vs display:none

Both visibility and display hide elements, but differently. display:none removes the element from layout entirely; visibility:hidden hides it but reserves its space. Choose based on whether you want to preserve layout space.

The Difference

Property	Visibility	Space Reserved
display: none	Hidden	No (removed from layout)
visibility: hidden	Hidden	Yes (space preserved)

CSS

/* display: none - removes from layout */
.hidden-display {
  display: none;
  /* Element doesn't render or take space */
}

/* visibility: hidden - hides but reserves space */
.hidden-visibility {
  visibility: hidden;
  /* Element is invisible but takes up space */
}

/* visibility: visible (default) */
.visible {
  visibility: visible;
}

Visual Comparison

HTML

<!-- display: none example -->
<div>Box 1</div>
<div style="display: none;">Box 2</div>
<div>Box 3</div>

<!-- Renders as: -->
<!-- [Box 1] [Box 3] - Box 2 removed -->

<!-- visibility: hidden example -->
<div>Box 1</div>
<div style="visibility: hidden;">Box 2</div>
<div>Box 3</div>

<!-- Renders as: -->
<!-- [Box 1] [empty space] [Box 3] - Box 2 space preserved -->

Note

Use display:none when you want to remove an element completely. Use visibility:hidden when you want to hide it but preserve its space in the layout.

Aspect ratio: [aspect-ratio](/css/aspect-ratio).