visibility — CSS Technical Interview Questions & Answers

Hiding an element while keeping its layout space.

visibility

  • Hiding an element while keeping its layout space.
  • visibility is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { visibility: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If visibility is about space, draw the box.

Technical Interview Tip: visibility: one rule on .card, then say what changed.

Code Examples for visibility

visibility — working example

.hidden-space {
  visibility: hidden; /* invisible but still occupies space */
}

.shown {
  visibility: visible;
}

/* Compare: display: none removes the box from layout entirely */

visibility: hidden hides painting but preserves layout space — unlike display: none.

How to Explain visibility to an Interviewer

What does visibility do?

A CSS property that changes look/layout Write it in a rule and refresh