visibility

visibility controls whether a box is drawn while usually keeping its layout space. Hidden differs from display:none: neighboring boxes do not close the gap.

Keep an invisible box’s space

The middle box is hidden. Its height and margin remain, leaving a gap between the visible neighbors.

<div class="box">Before</div>
<div class="box hidden">Hidden middle box</div>
<div class="box">After</div>

.box {
  padding: 0.5rem;
  margin-block: 0.5rem;
  background: #dbeafe;
}
.hidden {
  visibility: hidden;
}

Toggle a supplementary note without shifting the next line

The checkbox changes visibility through CSS. The hidden note has no interactive descendants; essential instructions remain visible outside it.

<input id="show-note" type="checkbox" /><label for="show-note"
  >Show the supplementary note</label
>
<p class="note">Try changing one value at a time.</p>
<p>This line keeps its position.</p>

.note {
  visibility: hidden;
  padding: 0.75rem;
  background: #eff6ff;
}
#show-note:checked ~ .note {
  visibility: visible;
}

Values, inheritance, and access

The initial value is visible and visibility is inherited. Hidden descendants normally inherit hidden, but a descendant can explicitly use visible. This is different from opacity, where a child cannot undo the ancestor’s composited transparency.

A hidden box cannot receive ordinary keyboard focus and is removed from the accessibility tree. Do not use it to visually hide a label that must remain available to a screen reader. Opacity:0, by contrast, leaves ordinary interaction and accessibility exposure in place.

Collapse has specialized behavior for table rows/columns, flex items, and ruby annotations; elsewhere it generally behaves like hidden. Its layout behavior still differs across browsers, especially with spanning table cells, so test the exact structure.

Common mistakes

The old lesson said hidden still receives focus and does not affect descendants; both claims were misleading. Visibility alone also does not implement an accessible tooltip. Choose the required behavior first: details for a disclosure, display to remove layout space, or opacity for transparency.

Sources and browser support

MDN: visibility describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.