Visibility

Definition

Utilities for controlling the visibility of an element without altering the document layout.

Explain Like I'm New

Harry Potter's Invisibility Cloak. If you use `hidden` (display: none), the element disappears and everything shifts up to take its space. If you use `invisible`, the element disappears, but leaves a massive blank hole where it used to be. It still takes up space.

Real World Example

Hiding an error icon next to an input field until there is an error, preventing the input field from jumping around the screen when the icon appears.

Common Use Cases

•Maintaining layout stability
•Animations

Interactive Example

Interview Questions

basic

What is the difference between `hidden` and `invisible`?

intermediate

Can you click on a button that has the `invisible` class?

Flash Cards

Question

hidden vs invisible?

Click to reveal answer

Answer

`hidden` removes the element from the layout entirely. `invisible` hides the element visually, but it still occupies physical space on the screen.

Question

Can you click it?

Click to reveal answer

Answer

No. Invisible elements do not capture pointer events (clicks or hovers).