Definition:
When you use the visibility property on any HTML element, it helps you make that element either visible or hidden.
It has two main values: visible (the element shows up) and hidden (the element becomes invisible). Even if the element becomes hidden, its place on the page stays the same — the space doesn't go away.
Syntax:
selector {
visibility: value; /* visible or hidden */
}Example:
<p style="visibility: visible;">I am visible (default behavior).</p>
<p style="visibility: hidden;">I am hidden but space remains.</p>Output:
First line output:
Visible: I am visible (default behavior).
Second line output:
Hidden: This element won’t be visible, but the space it occupies still remains.
List of Parameters:
- Visible: The element will be fully shown on the screen. It’s the default value.
- Hidden: The element won’t be visible, but the space it takes will still be there.
- Collapse: Mostly used for table elements. Hides row/column and sometimes removes space depending on the browser.
- Inherit: Makes the element take the same visibility as its parent element.
- Initial: Resets the visibility to the browser’s default value (usually visible).
- Unset: Works like a mix of inherit and initial.