CSS Presence Summary
CSS presence properties control whether an element is visible, invisible, transparent, or removed from the layout.
Several CSS properties can make something seem hidden, but they do not all behave the same way.
Display None Removes The Element From Layout
display: none hides an element and removes its space from the page layout.
.menu {
display: none;
}Nearby elements move as if the hidden element is not there.
Visibility Hidden Keeps The Space
visibility: hidden hides an element but keeps its space in the layout.
.tooltip {
visibility: hidden;
}The element is invisible, but the page still reserves room for it.
Opacity Controls Transparency
opacity changes how transparent an element is. A value of 1 is fully visible. A value of 0 is fully transparent.
.card {
opacity: 0.5;
}A fully transparent element can still take up space and may still receive pointer events, so do not treat opacity as the same as removing an element.
Choose The Property That Matches The Goal
Use display: none when the element should be gone from the layout. Use visibility: hidden when the space should remain. Use opacity when the element should fade or appear partially transparent.
The Overflow lesson explains another way content can be clipped or hidden when it does not fit inside a box.