CSS property visibility specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout. One can set the css display property to ‘none’ to suppress box generation altogether.
CSS property visibility
| CSS version: | CSS 2.1 |
| Value: | visible | hidden | collapse | inherit |
| Initial: | visible |
| Applies to: | all elements |
| Inherited: | yes |
visibility values
| visible | The generated box is visible |
| hidden | The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible. |
| collapsed | Applicable for table rows/columns. Entire row or column to be removed from the display and space made available to other content. It does not have good browser support. |
Example – visibility
In this example for visibility value:
- visible: First div is visible
- hidden: First div is hidden here but it still takes its space.
In the following code, CSS property visibility can be changed to the following values
- visible
- hidden
<style type="text/css">
.box {
width:100px;
background-color: lightgreen;
visibility: visible;
}
.box2 {
width:100px;
background-color: lightgray;
}
</style>
<div class="box">
box
</div>
<div class="box2">
box2
</div>visibility refresh
