Visibility property in CSS - Browser Rendering Trace

Render Flow - Visibility property

Parse CSS rules

↓

Match selector to element

↓

Apply visibility property

↓

Calculate layout (visibility affects painting)

↓

Paint element if visible

↓

Composite layers

The browser reads the CSS, finds elements matching the selector, applies the visibility property, then decides whether to paint the element or not without changing layout space.

Render Steps - 3 Steps

Code Added:visibility: visible;

Before

[__________]
[          ]
[          ]
[__________]
(Empty space, no box visible)

→

After

[██████████]
[█ Visible█]
[█  Box  █]
[██████████]

The box is fully visible, so the browser paints it with background and text.

🔧 Browser Action:Paints the element normally, includes it in layout and compositing.

Code Sample

A blue box with white text centered inside it, fully visible on the page.

CSS

<div class="box">Visible Box</div>

CSS

.box {
  width: 10rem;
  height: 5rem;
  background-color: #4a90e2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
}

Render Quiz - 3 Questions

After applying visibility: hidden (render_step 2), what do you see on the page?

A An empty space where the box was

B The box fully visible with text

C No space and no box visible

D The box partially transparent

Common Confusions - 2 Topics

Why does my element disappear but the space it takes stays empty?

Because visibility: hidden hides the element but keeps its space reserved in the layout (see render_steps 2).

💡 visibility: hidden = invisible but space remains.

Why doesn't visibility: collapse remove space for my div?

visibility: collapse only removes space for table rows or columns, for normal elements it acts like hidden (render_step 3).

💡 collapse removes space only in tables.

Property Reference

Property	Value	Effect on Visibility	Effect on Layout	Common Use
visibility	visible	Element is shown	Element occupies space	Default, show element
visibility	hidden	Element is invisible	Element still occupies space	Hide element but keep layout
visibility	collapse	Element is invisible	Element removed from layout (tables)	Hide table rows/columns and remove space

Concept Snapshot

visibility property controls if an element is shown or hidden. visible: element is shown and occupies space. hidden: element is invisible but space remains. collapse: removes element and space for table rows/columns. Does not affect layout except collapse in tables. Useful for hiding without layout shifts.

Practice

1. What does the CSS property visibility: hidden; do to an element on a webpage?

easy

A. It makes the element transparent but still clickable.

B. It hides the element but keeps its space reserved on the page.

C. It removes the element completely from the page layout.

D. It changes the element's color to match the background.

Solution

1. Step 1: Understand the visibility property

   The visibility property controls whether an element is visible or hidden but does not affect layout space.

2. Step 2: Analyze the effect of hidden

   When set to hidden, the element is not shown but still occupies space on the page.

3. Final Answer:

   It hides the element but keeps its space reserved on the page. -> Option B

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Hidden keeps space, display none removes it [OK]

Common Mistakes:

• Confusing visibility: hidden with display: none
• Thinking hidden elements are clickable
• Assuming hidden elements disappear completely

2. Which of the following is the correct CSS syntax to hide an element but keep its space using the visibility property?

easy

A. visibility: hidden;

B. visibility = hidden;

C. visible: hidden;

D. hide: visibility;

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : between property and value, ending with a semicolon.

2. Step 2: Match syntax to visibility property

   The correct syntax is visibility: hidden; to hide but keep space.

3. Final Answer:

   visibility: hidden; -> Option A

4. Quick Check:

   Property: value; is correct CSS syntax [OK]

Hint: Use colon, not equals, for CSS properties [OK]

Common Mistakes:

• Using equals sign instead of colon
• Swapping property and value order
• Using non-existent CSS properties

3. Consider this HTML and CSS:

<div style="visibility: hidden; background: red; width: 100px; height: 100px;">Box</div>

What will you see on the webpage?

medium

A. A transparent box with the text 'Box' visible.

B. A red box with the text 'Box' visible.

C. No space or box visible at all.

D. No red box or text, but space is reserved where the box would be.

Solution

1. Step 1: Analyze the visibility property effect

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

2. Step 2: Understand the visual output

   The red box and text are hidden, so nothing is visible, but the space of 100x100 pixels remains empty.

3. Final Answer:

   No red box or text, but space is reserved where the box would be. -> Option D

4. Quick Check:

   visibility: hidden hides content but keeps space [OK]

Hint: Hidden means invisible but space stays [OK]

Common Mistakes:

• Expecting the box to be visible
• Confusing with display:none which removes space
• Thinking text remains visible

4. You wrote this CSS but the element still shows on the page:

.hidden-box { visibility = hidden; }

What is the error?

medium

A. The syntax uses '=' instead of ':'.

B. The property name should be 'visible' not 'visibility'.

C. The class selector should start with '#', not '.'.

D. The value 'hidden' is invalid for visibility.

Solution

1. Step 1: Check CSS property syntax

   CSS uses a colon : to assign values, not an equals sign =.

2. Step 2: Identify the syntax error

   The code uses visibility = hidden; which is invalid syntax and ignored by browsers.

3. Final Answer:

   The syntax uses '=' instead of ':'. -> Option A

4. Quick Check:

   Use colon for CSS property assignment [OK]

Hint: CSS uses colon, not equals, for properties [OK]

Common Mistakes:

• Using '=' instead of ':' in CSS
• Confusing class selector '.' with id selector '#'
• Assuming 'hidden' is invalid value

5. You want to hide a button but keep the page layout stable so other elements don't move. Which CSS property and value should you use?

hard

A. display: none;

B. position: absolute; left: -9999px;

C. visibility: hidden;

D. opacity: 0;

Solution

1. Step 1: Understand layout impact of hiding methods

   display: none; removes element and space, opacity: 0; hides visually but keeps clickable, position: absolute; left: -9999px; moves element off screen.

2. Step 2: Choose method that hides but keeps space

   visibility: hidden; hides element but keeps its space, keeping layout stable.

3. Final Answer:

   visibility: hidden; -> Option C

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Use visibility hidden to keep space but hide element [OK]

Common Mistakes:

• Using display:none which removes space
• Using opacity:0 but element remains interactive
• Moving element off screen breaks accessibility