visibility
Hide an element while preserving its layout space, or collapse a table row.
Overview
| Class | Declarations |
|---|---|
visible | visibility: visible;
|
invisible | visibility: hidden;
|
visibility:collapse | visibility: collapse;
|
visibility:<value> | visibility: <value>;
|
Examples
Hide but preserve layout
Use invisible to hide an element while preserving its space. Compare the gap between items 01 and 03: the middle box still participates in layout. Unlike a transparent element, hidden content is also absent from the accessibility tree.
<div class="invisible"> Hidden placeholder</div>Generated CSS
@layer utilities { .invisible { visibility: hidden }}Make an element visible again
Use visible to restore visibility. Widen the preview to sm to reveal item 02; the surrounding boxes keep their positions.
<div class="invisible visible@sm"> Visible on larger screens</div>Collapse table rows
Use visibility:collapse to hide a table row and remove its vertical space while preserving the column sizing calculation. The preview compares the same native table with a visible and a collapsed middle row. Collapse behavior outside tables varies by layout and browser.
<tr class="visibility:collapse"> <td>Collapsed row</td></tr>Apply conditionally
Hide item 02 initially and reveal it at sm or in print. The layout space stays reserved throughout. Use the viewport control or Print preview to compare; see conditions.
<div class="invisible visible@print visible@sm">02 · Target</div>