CSS Visibility

By Manong / November 1, 2024

CSS visibility allows you to control whether an element is visible or hidden without affecting the layout of the page.

Visible

The visibility: visible; property is the default value, meaning the element is visible.

.visible-element {
    visibility: visible;
    background-color: lightgreen;
    padding: 10px;
    margin-bottom: 10px;
}

<div class="visible-element">This is a visible element.</div>

Hidden

The visibility: hidden; property hides the element, but it still takes up space in the layout.

.hidden-element {
    visibility: hidden;
    background-color: lightcoral;
    padding: 10px;
    margin-bottom: 10px;
}

<div class="hidden-element">This is a hidden element.</div>

Collapse

The visibility: collapse; property is used for table rows and columns. The element is hidden and the space it occupied is also removed.

.collapse-element {
    visibility: collapse;
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
}

<div class="collapse-element">This is a collapsed element.</div>

CSS Visibility Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Visibility Example</title>
    <style>
        .visible-element {
            visibility: visible;
            background-color: lightgreen;
            padding: 10px;
            margin-bottom: 10px;
        }

        .hidden-element {
            visibility: hidden;
            background-color: lightcoral;
            padding: 10px;
            margin-bottom: 10px;
        }

        .collapse-element {
            visibility: collapse;
            background-color: lightblue;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="visible-element">This is a visible element.</div>
    <div class="hidden-element">This is a hidden element.</div>
    <div class="collapse-element">This is a collapsed element.</div>
</body>
</html>

CSS Labs