CSS · Chapter 42 of 44
CSS Visibility
The visibility property controls whether an element is visible, but unlike display: none, visibility: hidden still reserves the element's space in the layout.
visibility: collapse behaves specially for table rows/columns, removing them without leaving gaps.
Syntax
visibility: visible | hidden | collapse;visibility vs display
display: none removes an element entirely from layout flow. visibility: hidden hides it visually but keeps its space reserved.
Use cases
Use visibility: hidden when you want to hide something temporarily (e.g. via hover) without causing surrounding content to shift.
Example 1 (css)
.tooltip {
visibility: hidden;
}
.wrapper:hover .tooltip {
visibility: visible;
}Output
The tooltip appears on hover without affecting the layout of nearby elementsBecause visibility: hidden reserves space, no layout shift happens when the tooltip appears.
Key points
- visibility: hidden hides an element but keeps its layout space.
- display: none removes both the element and its space.
- visibility: collapse has special behavior for table rows/columns.
- visibility is inherited by default, unlike display.
💡 Note: Choose visibility over display when you need to avoid layout shifts.