Flexbo saysvisibility:hidden hides an element but keeps its space; display:none removes it entirely.
visibility:hidden makes an element invisible but it still occupies layout space. display:none removes it from layout completely. Choose visibility when you want to reserve the spot (toggling without reflow), display:none when it should be truly gone.
Power-ups you unlock
visibility:hidden hides but keeps the space
display:none removes from layout entirely
visibility can be re-shown by children
Pick based on whether you want to reserve space
The Float Phantom attacks — common mistakes
Using visibility:hidden expecting the space to collapse
Confusing the two and getting layout gaps
Animating display (not animatable)
Boss battleToggle a box between visibility:hidden and visible; confirm layout does not shift.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>.hid{visibility:hidden}div{background:#140a28;color:#e6e0ff;padding:10px;margin:4px 0}</style></head><body style="background:#06040d;padding:20px"><div>before</div><div class="hid">invisible but space kept</div><div>after</div></body></html>