AAtomic CSS

visibility

Controls element visibility. Unlike display: none, hides visually while preserving layout space.

Class List

ClassCSSDescription
vhvisibility: hiddenHide element. Space preserved, children can show with vv
vvvisibility: visibleShow element. Override parent vh on children
vivisibility: initialReset to initial (visible). Release inherited visibility

Visual Comparison

Compares visibility: hidden and visible effects.

visible (default value) —vv

Item 1Item 2Item 3

All elements displayed normally

hidden (Item 2) — vh

Item 1Item 2Item 3

Item 2 invisible but space preserved

vh vs dn — Hiding Method Comparison

vh and dn both hide elements, but key difference is space preservation.

visibility: hidden — vh

Item 1Item 2Item 3

Space preserved. Item 2 position empty

display: none — dn

Item 1Item 2Item 3

Space removed. Items 1 and 3 adjacent

vh (visibility: hidden)dn (display: none)
Space Occupied차지함 (빈 공간 유지)차지하지 않음 (완전히 제거)
Screen Reader읽지 않음읽지 않음
Receives Events불가불가
Transition가능 (opacity와 조합)불가 (on/off 전환)
Individual Child Display가능 (자식에 vv 부여)불가 (모두 숨김)
Layout Impact공간을 차지하므로 레이아웃에 참여완전히 제거되어 레이아웃에 미참여
Common Use Cases레이아웃 유지하며 숨김, 페이드 애니메이션반응형 숨김, 조건부 렌더링

Individual Child Display

Unique to vh: even when parent is hidden, adding vv to a child shows that child. Not possible with dn.

parent vh + child vv

숨김보임!숨김

Only middle child shown with vv

Parent dn — individual child display impossible

숨김여전히 숨김숨김

With dn, all children hidden regardless of display value

Class Details

vhvisibility: hidden

Hides visually, preserving layout space. No events received. Adding vv to children shows them individually.

<!-- Hide element but maintain space -->
<div class="df gap8px">
  <span>Item 1</span>
  <span class="vh">Item 2 (hidden, space maintained)</span>
  <span>Item 3</span>
</div>

<!-- Hide parent, show specific child only -->
<div class="vh">
  <span>Hidden</span>
  <span class="vv">Only this child is visible!</span>
  <span>Hidden</span>
</div>

<!-- Combined with fade animation -->
<div class="vh o0 tall300msease hover-vv hover-o100">
  Appears on hover
</div>

Common Combinations

vh o0Hidden + transparent (fade-out state)
vh paHidden but absolute positioned (prevent space)
vh penHidden + pointer events blocked (double safety)
sm-vhHidden only below 768px (space preserved)

vvvisibility: visible

Makes element visible. Unnecessary alone (default), but used to show children when parent has vh or remove vh responsively.

<!-- Override parent vh in child -->
<nav class="vh">
  <a href="#">Hidden</a>
  <a href="#" class="vv">Only this link is visible</a>
  <a href="#">Hidden</a>
</nav>

<!-- Responsive: hide on mobile, show on desktop -->
<div class="vh sm-vv">768px shown only below this breakpoint</div>

Key Use Case

vv shines when overriding parent's vh on children. Unique to visibility, not possible with dn.

vivisibility: initial

Resets visibility to initial (visible). For resetting inherited visibility.

<!-- Reset inherited visibility -->
<div class="vh">
  <p>This text is hidden</p>
  <p class="vi">This text is reset to initial (visible)</p>
</div>

Responsive Combinations

Combine with media query prefixes to hide/show at specific screen sizes.

<!-- Hide on mobile (maintain space) -->
<div class="vv sm-vh">Hidden at 768px and below (space maintained)</div>

<!-- Mobile only -->
<div class="vh sm-vv">768px shown only below this breakpoint</div>

<!-- Hide at tablet and below -->
<div class="vv md-vh">Hidden at 1024px and below</div>
Class CombinationBehavior
vv sm-vhDefault visible → hidden below 768px (space preserved)
vh sm-vvDefault hidden → visible below 768px
vv md-vhDefault visible → hidden below 1024px
vh md-vvDefault hidden → visible below 1024px
vv lg-vhDefault visible → hidden below 1280px
vh es-vvDefault hidden → visible below 640px

Pseudo-class Combinations

Change visibility on hover, focus, etc.

<!-- Hide on hover -->
<div class="vv hover-vh tall200msease cp">
  Disappears on hover (space maintained)
</div>

<!-- Show child on hover -->
<div class="pr hover-vv">
  <span>Menu</span>
  <ul class="pa t100p l0 vh hover-vv bg18181B b1pxsolid27272A br8px p16px lsn">
    <li class="py4px">Item 1</li>
    <li class="py4px">Item 2</li>
  </ul>
</div>

<!-- Show on focus -->
<div class="vh focus-within-vv">
  <input type="text" placeholder="Parent becomes visible on focus" />
</div>

Tips & Notes

vh preserves space, dn removes space

Use vh to hide without layout shifts. Use dn to remove space entirely.

Individual child display only with vh

Apply vh to parent and vv to children to show only those children. Not possible with dn.

vh still affects layout

vh elements still occupy space, participating in layout calculations. Watch for unintended empty spaces.

Use with transitions

visibility is commonly used with opacity for fade animations. Opacity alone leaves events; vh also blocks events.

displayoverflowopacity