Visibility property in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS visibility property control?

The visibility property controls whether an element is visible or hidden on the page, but it still takes up space even when hidden.

beginner

What is the difference between visibility: hidden; and display: none;?

visibility: hidden; hides the element but keeps its space on the page. display: none; removes the element completely, so it takes no space.

intermediate

What are the possible values of the visibility property?

Common values are:<br>- visible: element is shown<br>- hidden: element is hidden but space remains<br>- collapse: for table rows/columns, hides and removes space<br>- inherit: takes value from parent

intermediate

How does visibility: collapse; behave in tables?

In tables, visibility: collapse; hides the row or column and removes its space, similar to display: none;, but only for table elements.

beginner

Why might you use visibility: hidden; instead of display: none;?

Use visibility: hidden; when you want to hide an element but keep its space to avoid layout shifts or keep the page structure stable.

What happens when you set visibility: hidden; on an element?

A The element becomes transparent but clickable

B The element is removed and space is freed

C The element is hidden but space is kept

D The element is visible but blurred

visibility: hidden; hides the element but keeps its space on the page.

Which CSS property removes an element and frees its space completely?

A visibility: hidden;

B opacity: 0;

C visibility: collapse;

D display: none;

display: none; removes the element from the layout, freeing its space.

What is the default value of the visibility property?

A hidden

B visible

C collapse

D none

By default, elements have visibility: visible;, meaning they are shown.

For which HTML elements does visibility: collapse; have a special effect?

A Table rows and columns

B Paragraphs

C Images

D Buttons

visibility: collapse; hides table rows or columns and removes their space.

If you want to hide an element but keep the page layout unchanged, which property should you use?

A visibility: hidden;

B opacity: 0;

C display: none;

D position: absolute;

visibility: hidden; hides the element but keeps its space, preserving layout.

Explain how the CSS visibility property affects an element's display and layout on a webpage.

Think about how hiding differs from removing an element.

Describe a situation where using visibility: hidden; is better than display: none;.

Consider user experience when content disappears.