CSS visibility – hide an element keeping its space

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

visibleThe generated box is visible
hiddenThe 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.
collapsedApplicable 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:

  1. visible: First div is visible
  2. 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

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments