Display: none

Display: none is a CSS property used to hide website elements. This code tells the document flow to ignore the element entirely, making it invisible. Designers often use this property when building and experimenting with a website. It allows them to test elements, find bugs, and rearrange a website layout while keeping CSS progress they can return to later. 

Designers must not confuse display: none with visibility: hidden, a similar CSS property that hides an element from view but doesn’t remove it entirely, so other elements (and search engines crawling a site) still treat it like it’s there. Visibility: hidden elements can look like blank spaces to viewers, whereas display: none doesn’t have this issue. But it’s important to keep track of display: none content so nothing goes missing accidentally.

Since elements with a display: none property do not display in the design, this can be handy for altering how content displays on mobile devices. Note that setting elements to display: none also makes them unavailable to assistive technology like screen readers. Learn more about conditional visibility.