Interview Question

Difference between display:none and visibility:hidden?

display:none removes boxes; visibility:hidden preserves their layout space.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

display:none and visibility:hidden hide content differently. • display:none prevents the element from generating boxes. • visibility:hidden keeps the box in layout but does not paint it. • Both normally remove the hidden content from accessibility interaction.

💡 Simple Example

.removed { display: none; } .reserved-space { visibility: hidden; }

⚡ Quick Revision

display:none removes boxes; visibility:hidden preserves their layout space.