To select display: none or visibility: hidden depends on whether element space is retained; 1.display: none completely removes elements, does not occupy space, and is suitable for dynamic control display; 2.visibility: hidden retains space, only visually hidden, suitable for animation or layout maintenance; 3. Note that display: none does not trigger the rendering tree, and cannot obtain the size, while visibility: hidden can still obtain the size through JS.

Sometimes you want an element on the web page to not display for the time being, but you are not sure whether to use display: none or visibility: hidden . Both attributes can hide elements, but the effects are quite different. Choosing the wrong ones may lead to layout problems or interaction abnormalities.

Let’s talk about their differences and applicable scenarios from the perspective of actual use.

display: none is completely "disappearing"

Use display: none element, as if it was "deleted" from the page:

• Elements do not occupy any space
• The page layout is recalculated and other elements fill its position
• Its size information cannot be obtained through JavaScript (because it is no longer in the rendering tree)

For example, you have a button whose default state is hidden and only shows when certain conditions are met. It is very suitable to use display: none at this time because it will not affect the layout from the beginning.

 .hide-me {
  display: none;
}

Common uses: Switch content blocks, lazy loading components, dynamically control displays based on user behavior, etc.

visibility: hidden is "invisible man"

By contrast, visibility: hidden just makes the element invisible, but it remains in the page layout:

• The elements still occupy the original space
• The page layout will not change
• Its size and position can still be obtained through JS

For example, when you are doing an animation, you want to hide an element first and then slowly fade in. At this time, it is important to retain space, otherwise the content of the page will suddenly jump.

 .hide-me-but-stay {
  visibility: hidden;
}

Common uses: animation transition, maintain layout structure, form verification prompt placeholder, etc.

How to choose? Depend on your needs

Which one to choose depends mainly on whether you want this element to "occupy the territory".

• If you want to hide it and not affect the page layout → use visibility: hidden
• If you want to completely remove visual representation and space occupation → use display: none

Simply put:

• display: none = The house is demolished and the land is not left behind
• visibility: hidden = The house is still there, but you can't see it

There are some details to note:

• visibility can be inherited, and child elements can be displayed forcibly using visibility: visible
• display: none won't affect performance too much, but frequent switching may trigger reordering

Basically these differences. After understanding it clearly, just select appropriate attributes according to the specific scenario, which are not complicated but are easy to ignore.

The above is the detailed content of Controlling element visibility with display: none vs visibility: hidden in css. For more information, please follow other related articles on the PHP Chinese website!