Quick Reach
CSS Visibility
The visibility property is used to display or hide specified HTML elements. The visibility property value as hidden makes specified element invisible. An element made hidden with visibility: hidden will occupy element’s space.
The different between these two properties to make elements hidden is that elements hidden by display: none property will not occupy any space or web page will look like there is no element.
Whereas element made hidden with visibility: hidden will occupy element’s space.
Example of using Visibility property to make elements hidden
The example below shows how to hide Div and heading 2 elements with visibility: hidden property value. Heading1 and paragraph are visible so you can notice spaces.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<html>
<head>
<style>
/*Using CSS visibility*/
h1
{
font-size:16px;
}
h2
{
visibility:hidden;
}
div
{
border: solid 1px black;
color: #355681;
visibility:hidden;
}
p
{
border: solid 1px black;
color: #355681;
}
</style>
</head>
<body>
<h1>This is not hidden heading 1</h1>
<h2>This is hidden heading 2</h2>
<div>This is hidden Div</div>
<p>Paragraph is not hidden</p>
</body>
</html>
|
Also see CSS display
Leave A Comment?