The main difference between display: none and visibility: hidden is layout impact and accessibility. 1. display: none removes elements completely from the page, and does not take up space, and screen readers usually ignore it; 2. visibility: hidden hides elements but retains their space, and may still be read by screen readers in some cases. When choosing, consider whether the layout structure needs to be preserved or whether access to content is allowed: the former is suitable for scenarios that completely hide and exclude interactions, such as inactive tabs, and the latter is suitable for situations where the layout is stable and may be redisplayed quickly, such as animation transitions. In addition, visibility: hidden can achieve animation effects through opacity, while display cannot transition. Neither of these affects JavaScript operations, but the child elements of visibility: hidden will be forced to be hidden.

When you're hiding elements on a webpage, two common CSS properties come into play: display: none and visibility: hidden . While they may seem similar at first glance, they actually behave quite differently in how they affect layout and accessibility.

How display: none Works

Using display: none completely removes an element from the page. It won't take up any space, and the browser acts as if it's not there at all.

• Layout impact : The element doesn't occur any space.
• Accessibility : Screen readers usually ignore elements with display: none .
• Use cases : Great for conditionally removing elements entirely, like hiding tabs that aren't active.

This method is often used when you don't want an element to be part of the layout or interacted with at all.

What Happens with visibility: hidden

On the other hand, visibility: hidden makes an element invisible but keeps its space in the layout.

• Layout impact : The element still takes up space.
• Accessibility : Some screen readers might still read the content depending on context.
• Use cases : Useful when you want to hide something visually but keep its position involve, such as preloading UI states.

For example, this can be handy for animations where an element will appear later without shifting surrounding content.

When to Choose One Over the Other

Your choice depends on what you need the hidden element to do:

• Use display: none if:

  • You want the element completely out of sight and layout.
  • You don't want it to be accessible via screen readers.
  • You're toggling content that shouldn't affect surrounding elements.

• Use visibility: hidden if:

  • You want to maintain layout structure.
  • You plan to show the element again soon.
  • You want the element to remain accessible in some contexts.

Also consider transitions — visibility can be animated with opacity, while display cannot.

A Few Subtle Gotchas

One thing people often miss is how these properties interact with JavaScript:

• Elements with display: none can still be targeted and manipulated via JS.
• Setting visibility: hidden doesn't prevent click events if the element still exists in the DOM and has handlers attached.

Also, visibility: hidden affects child elements too — they become hidden even if their own visibility is set to visible.

So depending on your use case, either approach could be better. Just remember that display: none fully removes the element from rendering, while visibility: hidden hides it but keeps its place.

Basically that's it.

The above is the detailed content of Comparing CSS `display: none` and `visibility: hidden`. For more information, please follow other related articles on the PHP Chinese website!