EN
CSS - hide element
0 points
In this article, we would like to show you how to hide element using CSS.
Quick solution:
xxxxxxxxxx1
div {2
display: none;3
}or:
xxxxxxxxxx1
div {2
visibility: hidden;3
}Note:
Analyze the below examples to see the difference between the two solutions.
By setting the display property to none the element will be hidden and the page will be displayed as if the element is not there.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.visible {7
padding: 5px;8
border-radius: 10px;9
background-color: #3085d6;10
color: white;11
}12
13
div.hidden {14
display: none;15
}16
17
</style>18
</head>19
<body>20
<div class="hidden">hidden div</div>21
<div class="hidden">hidden div</div>22
<div class="hidden">hidden div</div>23
<div class="visible">visible div</div>24
</body>25
</html>
By setting the visibility property to hidden the element will be hidden, but it will still affect the layout by taking up the same space as before.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.visible {7
padding: 5px;8
border-radius: 10px;9
background-color: #3085d6;10
color: white;11
}12
13
div.hidden {14
visibility: hidden;15
}16
17
</style>18
</head>19
<body>20
<div class="hidden">hidden div</div>21
<div class="hidden">hidden div</div>22
<div class="hidden">hidden div</div>23
<div class="visible">visible div</div>24
</body>25
</html>