To control whether an element is visible or not, you can utilize the visibility property. This property offers several values, as outlined in the table below:
| Value | Description |
|---|---|
visible |
The default state. The element and its contents are visible. |
hidden |
The element and its content become invisible, yet they still affect the layout of the page. |
collapse |
This value removes the entire row or column from display, often used for table elements. |
inherit |
The visibility value is inherited from the parent element. |
The style rule visibility: collapse; removes internal table elements without affecting the table's layout. The space they occupied will be taken up by subsequent elements.
Note: Applying visibility: collapse; to elements other than tables behaves the same as hidden.
Although similar at first glance, the display and visibility CSS properties serve different purposes, often causing confusion among beginners:
visibility: hidden; hides the element while still occupying space in the layout. Child elements remain visible if their visibility is set to visible.display: none; completely removes the element from the document, including its space in the layout. Child elements also disappear, regardless of their individual display settings.Explore the demo below to see how these properties affect layouts.
