👁️ CSS visibility — Control Element Visibility Without Affecting Layout

The visibility property in CSS controls whether an element is visible or hidden — without removing it from the document flow. This means the element can be invisible but still occupy space on the page.

---

🔹 What Does visibility Do?

• Controls if an element is rendered visible or hidden.
• Unlike display: none, hidden elements still take up space.
• Useful for toggling visibility without causing layout shifts.

---

📘 Syntax

selector {
  visibility: visible | hidden | collapse | initial | inherit;
}

---

✅ Values Explained

Value	Description
visible	Default. Element is visible and rendered normally.
hidden	Element is hidden but still occupies space in the layout.
collapse	For table rows/columns: hides element and removes space.
initial	Resets to the default value (visible).
inherit	Inherits visibility from its parent element.

---

✍️ Examples

1. Hiding an element but preserving space

<p>This text is visible.</p>
<p style="visibility: hidden;">This text is hidden but takes space.</p>
<p>This text follows the hidden paragraph.</p>

✅ The hidden paragraph is invisible, but the space it occupies remains.

---

2. Difference between visibility: hidden and display: none

Property	Effect on Rendering	Effect on Layout
visibility: hidden	Element is invisible but occupies space	Space reserved on page
display: none	Element is not rendered at all	No space occupied (layout shifts)

---

3. Using visibility: collapse in Tables

<table>
  <tr>
    <td>Row 1</td>
    <td>Visible</td>
  </tr>
  <tr style="visibility: collapse;">
    <td>Row 2</td>
    <td>Collapsed</td>
  </tr>
</table>

✅ The second row disappears and frees its space in supporting browsers.

---

🖼️ Image Idea: Visual Layout Comparison

• Side-by-side blocks showing elements with visible, hidden, and display: none.
• Show the preserved space with visibility: hidden versus removed space with display: none.

---

💡 Use Cases

• Temporarily hide elements while maintaining page layout
• Accessibility: hide content visually but keep it in the DOM for screen readers (combine with ARIA roles)
• Animations where layout stability is important

---

✅ Summary

Property	visibility
Purpose	Show or hide elements without affecting layout
Default value	visible
Key difference	hidden hides but keeps space; display: none removes from layout
Special case	collapse for tables removes element and frees space

---

🔚 Final Thought

Use visibility when you want an element hidden but still occupying space — perfect for stable layouts where removing elements would cause unwanted jumps or reflows.

---