Glossary
Display: none

Display: none

display: none is a CSS property that hides an element completely, removing it from the page's layout as if it were never there. Designers often use it while building or testing a page, toggling elements on and off to troubleshoot without deleting anything.

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.

Practice using display properties in CSS styling.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more