CSS visibility Property

Definition and Usage

The visibility property shows or hides an element. With hidden, the box is not drawn but still occupies layout space. Neighbors do not slide into the gap.

To hide an element and remove its space, use display: none instead. The property is inherited. The initial value is visible.

CSS Syntax

Example: visibility: hidden;

Property Values

How to Use visibility

Choose whether to keep layout space, then set the keyword on the element.

1. Decide: hide but keep space (hidden) or remove from layout (display: none).
2. Set visibility on the element you want to show or hide.
3. Optional: show a child inside a hidden parent with visibility: visible on that child.
4. For table rows or columns, consider collapse when you want to drop their space without a full table reflow.

Live Preview

Three boxes in a row. Change visibility on the middle box and watch whether the gap stays.

CSS Examples

Each snippet focuses on visibility. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  .b {
    visibility: hidden;
  }
</style>

<div>A</div>
<div class="b">B</div>
<div>C</div>

<style>
  .parent {
    visibility: hidden;
  }
  .child {
    visibility: visible;
  }
</style>

<div class="parent">
  Parent hidden
  <span class="child">Child visible</span>
</div>

<style>
  .hide {
    visibility: collapse;
  }
  td {
    border: 1px solid #ccc;
    padding: 8px;
  }
</style>

<table>
  <tr><td>Row 1</td></tr>
  <tr class="hide"><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

Key Takeaways