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.