There are three different properties in CSS that can control the visibility of an element, visibility, opacity, and display. In this lesson, we will discuss their differences and when is the best time to use each option.
Visibility
visibility accepts three values, visible, hidden, and collapse.
- When set to
visible, the element will be displayed normally. - When set to
hidden, the element will be hidden, but the space it occupies will be preserved.
As for collapse, when a table row or column is set to collapse, that row or column will be hidden, and the space it occupies will also be removed. When other elements are set to collapse, it behaves just like hidden.
Opacity
When opacity is set to 0, the element will be hidden, but the space it occupies will be preserved. This is just like setting visibility to hidden.
When opacity is set to 1, the element will be displayed normally, just like setting visibility to visible.
Display hidden
When setting the display property to hidden, it will remove the element from the DOM tree, meaning the element will be hidden, and the space it occupies will also be removed. This is kind of like setting visibility to collapse, but it works for all elements, not just table rows and columns.