Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Controlling the Visibility of elements Working with CSS
The CSS visibility property controls whether an element is visible or hidden on a web page. Unlike the display property, visibility: hidden keeps the element's space in the layout while making it invisible.
Syntax
selector {
visibility: value;
}
Possible Values
| Value | Description |
|---|---|
| visible | Default value. Element and its children are visible |
| hidden | Element is invisible but still takes up space in layout |
| collapse | Used only for table elements. Removes row/column space |
| initial | Sets visibility to its default value |
| inherit | Inherits visibility value from parent element |
Example: Hiding an Element
The following example demonstrates hiding a paragraph while keeping its space in the layout −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #ccc;
padding: 20px;
margin: 20px;
}
.hidden-text {
visibility: hidden;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #999;
}
.visible-text {
background-color: #e8f4fd;
padding: 10px;
border: 1px solid #007acc;
}
</style>
</head>
<body>
<div class="container">
<p class="visible-text">This paragraph is visible.</p>
<p class="hidden-text">This paragraph is hidden but takes up space.</p>
<p class="visible-text">This paragraph is also visible.</p>
</div>
</body>
</html>
Two visible paragraphs with blue backgrounds appear with a gap between them. The hidden paragraph is invisible but its space is preserved, creating the gap.
Example: Table Row Collapse
The collapse value is specifically designed for table elements. It completely removes the space occupied by table rows or columns −
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 60%;
margin: 20px auto;
border-collapse: collapse;
border: 2px solid #333;
}
th, td {
border: 1px solid #666;
padding: 10px;
text-align: center;
}
thead {
background-color: #4CAF50;
color: white;
}
tbody tr:nth-child(2) {
visibility: collapse;
}
.highlight {
background-color: #fff3cd;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>Name</th><th>Course</th><th>Grade</th></tr>
</thead>
<tbody>
<tr class="highlight"><td>Alice</td><td>Mathematics</td><td>A</td></tr>
<tr><td>Bob</td><td>Physics</td><td>B</td></tr>
<tr class="highlight"><td>Charlie</td><td>Chemistry</td><td>A+</td></tr>
</tbody>
</table>
</body>
</html>
A table with green header and two visible rows (Alice and Charlie). Bob's row is completely removed from the layout, with no gap left behind.
Comparison: Visibility vs Display
| Property | Hidden Element Space | Performance |
|---|---|---|
visibility: hidden |
Preserves space in layout | Element is rendered but not painted |
display: none |
Removes from layout completely | Element is not rendered at all |
Conclusion
The visibility property provides precise control over element visibility while maintaining layout structure. Use hidden when you want to temporarily hide content without affecting the page layout, and collapse for removing table rows or columns completely.
Updated on: 2026-03-15T14:03:03+05:30
615 Views
Advertisements