🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

REFERENCEcss

css Documentation

📖 INDEX

# Align-content

# Animation-delay

# Animation-duration

# Animation-timing-function

# Background-color

# Background-image

# Background-position

# Background-repeat

# Background-size

# Basic-Selectors

# Child-Selectors

# Class-Selectors

# CSS-Attribute-Selectors

# Descendant-Selectors

# Flex-direction

# Grid-template-areas

# Grid-template-columns

# Grid-template-rows

# Include-Css-in-Html

# Justify-content

# Justify-items

# Letter-spacing

# Media-queries

# Pointer-events

# RefDeviceCharacteristics

# RefDimensions

# RefScreenDimensions

# Siblings-Selectors

# Text-transform

# Top, Right, Bottom, Left

# Transition-delay

# Transition-duration

# Transition-timing-function

# Universal-Selectors

# Including-Css-in-Html

LOADING ENGINE...

CSS Visibility

Now you see it, now you don't. Master Visible, Hidden, Collapse, and Display nuances.

style.css

.ghost-box {

visibility: hidden;

/* layout reserved */

}

.gone-box {

display: none;

/* removed from DOM */

}

1

Hidden

3

style.css

1 / 7

👁️

Tutor:The 'visibility' property controls whether an element is visible or hidden without changing the layout of the document.

⭐ 0 EXP

Visibility Tree

Unlock nodes by mastering Visible, Hidden, Collapse, and Display nuances.

Concept 1: Visibility Visible

visibility: visible is the default state. The element is rendered, takes up space, and is interactive.

System Check

What is the default visibility of a standard div?

hiddenvisiblecollapsenone

Community Techniques

Accessibility Patterns

Know a trick for hiding content visually but keeping it available for screen readers? Share your snippet.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Visibility

Pascual Vila

Frontend Instructor.

The visibility property is essential for controlling the visual presence of elements without necessarily destroying their layout footprint. It is often confused with display: none, but the two serve very different purposes.

Visibility Values

Visible: The default value. The element is shown.
Hidden: The element is invisible, but it still occupies the same space in the document flow.
Collapse: Used primarily for table rows/columns/groups. It removes the element (like display: none) but recalculates the table structure dynamically.

Visibility vs Display vs Opacity

Understanding the nuance is key to layout stability:

display: none removes the element from the DOM flow entirely. Layout shifts occur.
visibility: hidden makes it invisible, but layout is preserved (empty space remains). It is not interactive.
opacity: 0 makes it transparent. It preserves layout space AND interactivity (buttons can still be clicked).

CSS Visibility Glossary

Hidden: The element is not drawn, but its box is still generated, affecting the layout of surrounding content.
Collapse: For tables, this removes the row/column but keeps the table width calculation. For other elements, it usually acts like 'hidden'.
Display: None: Turns off the display of an element so that it has no effect on layout (the document renders as if the element did not exist).
Opacity: The degree to which content behind an element is hidden. Opacity 0 is fully transparent but the element remains active.