CSS Documentation

Visibility

Menu

CSS Visibility

The visibility property in CSS specifies whether or not an element is visible. It is important to note that hidden elements still take up space in the layout.

Visibility Values

  • visible: The default value. The element is visible.
  • hidden: The element is hidden (but still takes up space).
  • collapse: This value removes the element from the document flow (for table rows, columns, column groups, and row groups). For other elements, it works like "hidden".

Example

Here's an example of using different visibility values:

.visible-element {
ㅤvisibility: visible;
}

.hidden-element {
ㅤvisibility: hidden;
}

.collapse-element {
ㅤvisibility: collapse;
}

Visibility vs Display: None

It's important to understand the difference between visibility: hidden and display: none:

  • visibility: hidden hides the element, but it still takes up space in the layout.
  • display: none removes the element completely from the document flow.

Best Practices

  • Use visibility: hidden when you want to hide an element but maintain its space in the layout.
  • Use display: none when you want to completely remove an element from the layout.
  • Be cautious when using visibility: collapse as its behavior can vary across different browsers.
  • Consider using opacity: 0 as an alternative to visibility: hidden if you want to animate the visibility of an element.

Understanding the visibility property is crucial for controlling the visual presentation of elements on your web page while maintaining the overall layout structure.