CSS Tutorial

CSS visibility Property

The visibility property is used to show or hide an element, but it does not remove the space the element takes on the page.

🔹 Common Values:

• visible – Default value; the element is visible.
• hidden – The element is hidden, but its space is still preserved.

🧪 Live Example:

Box 2 is hidden using visibility: hidden, but it still takes up space:

💡 CSS Code:

.box2 {
  visibility: hidden;
}

📌 Key Difference (vs display):

• display: none; hides the element and removes its space.
• visibility: hidden; hides the element but keeps its space reserved.