How to Use the CSS Visibility Property
The visibility property property is used to make an element invisible. Possible values
are:.
- visible
- hidden
The major difference between setting an element's visibility property to hidden and
setting its display property to none is that a hidden element still affects the layout of the
page, whereas an element that has a display property value of none does not.
The following example shows how the visibility property can be used hide elements while maintaining
the space taken up by them:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>checkers</title>
<style type="text/css">
body {
background-color: white;
}
.square {
background-color: black;
width: 100px;
height: 100px;
margin: 0px;
display: inline-block;
}
.hidden {
visibility:hidden;
}
</style>
</head>
<body>
<div class="square"></div>
<div class="square hidden"></div>
<div class="square"></div>
<div class="square hidden"></div>
<div class="square"></div>
<div class="square hidden"></div>
<div class="square"></div>
<div class="square hidden"></div><br>
<div class="square hidden"></div>
<div class="square"></div>
<div class="square hidden"></div>
<div class="square"></div>
<div class="square hidden"></div>
<div class="square"></div>
<div class="square hidden"></div>
<div class="square"></div>
</body>
</html>