HTML & CSS - Mastery / Layout Fundamentals

Visibility

🧠 Understanding Visibility Property

Controls whether an element is visible on the page, but still takes up space.

🔹 visible (default)

Element is fully shown.

🔹 hidden

Element is invisible but still occupies its space.

🔹 collapse

  • For table elements only.

  • Collapses the row/column without leaving empty space.

🎯 Full Working Example

💡 Visibility vs Display

Property

Visible?

Takes Space?

visibility: hidden

❌ No

✅ Yes

display: none

❌ No

❌ No

If you want to hide something completely and remove it from layout → use display: none.

If you just want it invisible but layout intact → use visibility: hidden.

🎯 Real-World Examples

  • overflow: auto → scrollable chat windows.

  • visibility: hidden → temporarily hiding elements in a quiz/game UI.

  • overflow: hidden + text-overflow: ellipsis → clean truncation of long text.