When a parent element has display: none, the parent and all of its child elements are completely removed from the layout and rendering flow. They occupy no space and are not visible or interactive.

Key Points

1
Child elements are hidden along with the parent; their visibility cannot be toggled independently while the parent is display: none.
2
The entire subtree of elements under the parent is ignored by the browser for layout, painting, and events.
3
CSS applied to child elements has no visual effect while the parent is display: none.
4
Elements removed by display: none are also inaccessible to assistive technologies like screen readers.

Example: Parent with display: none

In this example, the <p> and <span> inside the hidden <div> are completely removed from the layout. Only the paragraph outside the hidden parent is visible and takes up space.

Best Practices

1
Use display: none to completely remove elements when they should not occupy space or participate in layout.
2
Do not rely on child elements being visible or interactive while the parent is display: none.
3
For temporarily hiding content while preserving layout space, use visibility: hidden instead.

Difficulty: 2/10

Topics: layout, rendering, accessibility

Scenario Questions

0-2 years experience

1
You have a modal overlay that starts with display: none. What happens to the button inside that overlay before the modal opens?
2
If you set display: none on a <section> containing several <p> tags, how does that affect the page layout and the rendering of those paragraphs?
3
When you toggle a class that applies display: none to a container, what happens to any event listeners attached to its child elements?

2-5 years experience

1
During debugging you see a dropdown not appearing even though JavaScript adds an open class. The parent has display: none under a media query. Explain why the children stay hidden and how you'd fix it.
2
Your team hides a loading spinner by setting display: none on its wrapper after data loads. Compare the performance of this approach to removing the element from the DOM.
3
A hidden form field inside a container with display: none is still being submitted. Is that expected, and why?

5-8 years experience

1
Designing a component library that supports SSR, discuss the trade‑offs of using display: none to hide components versus conditionally rendering them, especially for initial paint and bundle size.
2
In a large SPA many sections are toggled with display: none and you notice slower reflows over time. Explain the browser mechanisms behind this and propose a mitigation strategy.
3
Accessibility guidelines advise against display: none for content that should be read by screen readers. How would you architect a solution that hides UI visually while keeping it accessible?

8+ years experience

1
Your organization is migrating a legacy monolith UI to micro‑frontends. Some legacy components rely on display: none to hide large DOM trees that remain in the page. Evaluate the long‑term maintenance and performance risks, and outline a migration plan to refactor these patterns across teams.
2
As the design system owner, you need a policy for hiding content across hundreds of apps. Discuss how you would standardize the use of display: none versus alternatives like visibility:hidden, aria-hidden, or portal rendering to balance SEO, accessibility, and runtime performance at scale.

Follow-up Questions

❓Can you explain how the rendering pipeline handles elements with display:none?
❓What would change if you used visibility:hidden instead?
❓How does display:none affect screen‑reader visibility and SEO?