Quick Reach
The Display property of CSS
The CSS display property is used to display or hide the specified HTML elements. The display property value as none makes the specified element hidden.
>>A display example to show a hidden div
The element will be hidden as it does not exist in the web page. Or you can say, an element with the display: none will not occupy any space on the web page.
The display property is also used to control the display of elements (block or inline) the way it does. As such, the block elements (div, p, h1, h2 etc.) are those that occupy full available width.
Besides, it adds line breaks before and after it. While the in-line items like <a>, <span> etc. are those that take only the required space.
See display inline-block example
This chapter will show examples of display in CSS for both: hiding elements and changing the behavior of inline or block elements by using the display property. First, let us look at the display with inline and block elements.
CSS display with inline-block elements example
To learn how display property works, first let us have a look at how normally the block and inline elements look.
For that, we are using a div block element and <a> tag, which is an inline element.
To make it clear, we have used border property where you can easily see the difference between the two:
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
|
<html>
<head>
<style>
/*Using Display*/
.div1
{
border: solid;
border-width:1px;
color: #355681;
}
a
{
border: solid;
border-width:1px;
}
</style>
</head>
<body>
<div>This is Div block with full width and line-breaks before and after</div><br />
<a href=“www.example.com”>default link style</a>
</body>
</html>
|
As you can see, the Div element is taking the full available width while <a> is taking only what is required.
The examples below show how to use the display CSS property to make div element as an inline element and <a> as the block element.
Display block element example
The following example shows how to use the display property in a block element. The example uses the CSS display property in a div block element to make it an inline element.
That means it will only take the necessary space and also removes the line-breaks after the display: inline value is applied.
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
|
<html>
<head>
<style>
/*Using Display*/
.div1
{
border: solid;
border-width:1px;
color: #355681;
display:inline;
}
a
{
border: solid;
border-width:1px;
}
</style>
</head>
<body>
<div>This is Div block with display:inline property</div><br />
<a href=“www.example.com”>default link style</a>
</body>
</html>
|
You can see, the div element is now occupying space where the text ends. Also, it removes line break by using the display inline value in the div element.
Display with inline element example
The following example shows how to use display: block value to an inline element. The example uses display property on the <a> inline element to make it a block element.
That means it will occupy whole space and also adds line-breaks after using the display: block value.
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
|
<html>
<head>
<style>
/*Using Display*/
a
{
border: solid;
border-width:1px;
display:block;
}
</style>
</head>
<body>
<a href=“http://www.example.com”>link display:block</a>
</body>
</html>
|
You see <a> which is basically an inline element is now acting as the block element by using display block value.
The following example shows how to use the display none value. The example shows how to hide a div and heading elements with the display: none property value.
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
|
<html>
<head>
<style>
/*Using Display*/
h1
{
font-size:16px;
}
h2
{
display:none
}
div
{
border: solid 1px black;
color: #355681;
display:inline;
display:none
}
</style>
</head>
<body>
<h1>This is not hidden heading 1</h1>
<h2>This is hidden headin 2</h2>
<div>This is hidden Div</div>
</body>
</html>
|
You can use the JavaScript to make hidden elements as visible. The example below uses the jQuery (javascript library) to show an element visible which is made hidden by using the display: none.
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
|
<!DOCTYPE html>
<head>
<title>jQuery Testing</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.hidetext”).click(function () {
$(“.text”).show(“slow”)
});
});
</script>
</head>
<body>
<button class=“hidetext”>Show yellow line</button>
<div class=“text” style=“background-color:yellow;display: none;”>
This is Yellow line!!
</div>
</body>
</html>
|
You can read more about making hidden elements as visible in the jQuery chapter: jQuery show.
The following example shows how to use the display with the table. The example below shows how to hide a table with display: none property value. Upon clicking on the button, the table will be shown by using jQuery.
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<html>
<head>
<style>
/*Using CSS border*/
.table_cl{
display:none;
border-collapse: collapse;
border: 2px solid #006655;
}
.table_cl th{
border: 1px dashed black;
color: #FF8800;
}
.table_cl td{
border: 1px dotted black;
color: blue;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.hidetext”).click(function () {
$(“table”).show(“slow”)
});
});
</script>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
<button class=“hidetext”>Show table</button>
</body>
</html>
|
Difference between CSS display and visibility properties
How to make elements hidden with the display property is explained above with examples. To make elements hidden with visibility property is explained in its own chapter.
The difference between these two properties is that the elements that are hidden by display: none property will not occupy any space or the web page will look like there is no element.
Whereas the element made hidden with the visibility: hidden will occupy element’s space.
Leave A Comment?