Displaynone

Display:none is a value of the CSS display property used to hide an element from rendering. When applied, the element and all of its descendants do not render, do not participate in layout, and do not occupy any space on the page.

Unlike visibility or opacity, which hide content while preserving space or visibility, display:none removes the element from the layout tree entirely. The element is effectively absent from layout calculations and the accessibility tree in most browsers, so it is typically not reachable by keyboard navigation or screen readers while the style is in effect.

Common uses include toggling UI elements such as menus and dropdowns, hiding content for responsive designs, or removing nonessential content until it is needed. It is commonly controlled with JavaScript, but can also be managed via CSS media queries, pseudo-classes, or simple class toggling.

Relationship to other hiding techniques: visibility:hidden keeps space in the layout, while display:none removes the element entirely; opacity:0 makes content invisible but still part of the layout and reachable by some assistive technologies. When using display:none, ensure alternative accessible mechanisms exist if needed.

Considerations include preventing keyboard focus from landing on hidden content, and understanding that display changes trigger layout reflow. On showing something, assign an appropriate display value such as block, inline, or flex, according to the element’s nature.