Similarities: Both make elements invisible.
Differences:
- display: none; removes the element completely from the rendering tree, so it does not occupy any space during rendering.
- visibility: hidden; does not remove the element from the rendering tree; the element continues to occupy space during rendering, but its content is invisible.
- display: none; is a non-inherited property, causing child elements to disappear because the parent is removed from the rendering tree, and modifying child elements' properties cannot make them visible. visibility: hidden; is an inherited property, causing child elements to disappear due to inheriting the hidden value, and setting visibility: visible can make child elements visible.
- Modifying the display property of elements in the normal flow typically causes layout reflow. Modifying the visibility property only causes repainting of the element itself.
- Screen readers do not read the content of elements with display: none; but do read the content of elements with visibility: hidden;.