What happens when you set display: none on an element?

Q: What happens when you set display: none on an element?

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. The element becomes invisible and occupies no space in the layout. It is not accessible for user interactions like clicking or hovering. Child elements of the hidden element are also not rendered. The element can be made visible again by changing its display property (e.g., `display: block` or `display: inline`). `display: none` is different from `visibility: hidden`, which hides the element but still reserves its layout space. This paragraph is visible. This paragraph is hidden and does not take up space. This paragraph appears right after the first one. 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. Use `display: none` for toggling visibility dynamically with JavaScript (e.g., dropdowns, modals). Avoid using `display: none` to hide content important for accessibility — screen readers won’t detect it. If you need the element hidden but still occupying space, use `visibility: hidden` instead.

Difficulty: 3/10

layout, rendering, accessibility

Understanding `display: none` in CSS

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

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.

Scenario Questions

0-2 years experience

Follow-up Questions

Difficulty: 3/10

layout, rendering, accessibility

Understanding `display: none` in CSS

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

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.

Scenario Questions

0-2 years experience

What happens when you set display: none on an element?

Understanding display: none in CSS

Scenario Questions

Follow-up Questions

What happens when you set display: none on an element?

Understanding display: none in CSS

Scenario Questions

Follow-up Questions

Understanding `display: none` in CSS

Understanding `display: none` in CSS