Flexbo saysdisplay:none removes an element entirely; display:contents drops the box but keeps its children.
display:none takes an element out of layout and the accessibility tree. display:contents removes the box itself but promotes its children into the parent's layout — useful with flex/grid wrappers. There are also table display values for legacy layout mimicry.
Power-ups you unlock
display:none removes from layout AND a11y tree
visibility:hidden hides but keeps space (different)
display:contents drops the box, keeps children
Table display values exist for legacy layout
The Float Phantom attacks — common mistakes
Confusing display:none with visibility:hidden
display:contents on something that needed its box
Hiding content from screen readers unintentionally
Boss battleToggle an element between display:none and block, then try display:contents on a flex wrapper.