When you set display: none on an element, it is completely removed from the document’s layout flow. This means it does not take up any space on the page, and other elements behave as if it doesn’t exist.

Key Characteristics of `display: none`

1
The element becomes invisible and occupies no space in the layout.
2
It is not accessible for user interactions like clicking or hovering.
3
Child elements of the hidden element are also not rendered.
4
The element can be made visible again by changing its display property (e.g., display: block or display: inline).
5
display: none is different from visibility: hidden, which hides the element but still reserves its layout space.

Example: Using `display: none`

In this example, the second paragraph is not rendered on the page at all. The third paragraph moves up immediately after the first one, as if the hidden element doesn’t exist.

Best Practices

1
Use display: none for toggling visibility dynamically with JavaScript (e.g., dropdowns, modals).
2
Avoid using display: none to hide content important for accessibility — screen readers won’t detect it.
3
If you need the element hidden but still occupying space, use visibility: hidden instead.

Difficulty: 3/10

Topics: layout, rendering, accessibility

Scenario Questions

0-2 years experience

1
If you set display:none on a button inside a form, what effect does it have on the form's submission behavior?
2
How would you hide a modal using CSS while keeping it in the DOM, and what does display:none do in that case?
3
When a parent element has display:none, what happens to its child elements in the page layout?

2-5 years experience

1
You added a class that toggles display:none on a dropdown, but the menu never appears. Walk me through how you’d debug this.
2
Why doesn’t a CSS transition on opacity work when the element is shown/hidden with display:none, and what alternative would you use?
3
In a React component you conditionally apply display:none to a section. Why might screen readers still announce its content, and how would you fix it?

5-8 years experience

1
Discuss the performance trade‑offs of using display:none on a large list of items versus removing those items from the DOM entirely.
2
When building a virtualized list, would you rely on display:none to hide off‑screen rows? Why or why not?
3
In a themable UI library, how do you ensure that components using display:none don’t cause unexpected layout reflows on high‑DPI devices?

8+ years experience

1
Your team is migrating a legacy codebase that heavily uses display:none for feature flags. Propose a strategy to refactor this for better accessibility and maintainability.
2
At scale, how does widespread use of display:none affect the critical rendering path, and what architectural changes would you recommend?
3
Compare using display:none versus visibility:hidden in a cross‑team design system, considering SEO, accessibility, and performance trade‑offs.

Follow-up Questions

❓Can you explain how display:none impacts reflow and repaint?
❓What differences would you expect for screen readers when using display:none?
❓How would you verify that an element truly isn’t affecting layout in the browser?