CSS display none vs visibility hidden

There are three common ways to hide something, and they are not the same. Pick by asking two questions: should it keep its space? and should it still be reachable?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
  .row { display: flex; gap: 8px; }
  .row div { flex: 1; padding: 10px; background: #fdebd9; border: 1px solid #d94a00; }
  .b { display: none; }
  .c { visibility: hidden; }
  .d { opacity: 0; }
</style>
<div class="row">
  <div>A (normal)</div>
  <div class="b">B display:none</div>
  <div class="c">C visibility:hidden</div>
  <div class="d">D opacity:0</div>
  <div>E (normal)</div>
</div>

B has disappeared and the row has re-flowed. C and D left blank spaces. D is invisible but still exists: you could click on it.

Which one to use

• Remove it from the page (a closed menu, content for other screen sizes): display: none.
• Hide it but keep the layout steady: visibility: hidden.
• Fade it in or out: opacity, and add visibility or pointer-events: none when it is hidden so that it cannot be clicked.