Both properties are very useful for hiding elements in a webpage.

Display:none

Display: none is one property of CSS display property. It is used to hide an element on the webpage. It specifies the existence of an element. When we use display: none property it hides the element with the space taken by the elements.

Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.b1{
			background-color: green;
			width: 200px;
			height: 50px;
			font-size: 30px;
			color: white;
		}
		.b2{
			background-color: yellow;
			width: 200px;
			height: 50px;
			font-size: 30px;
			color: white;
		}
		.b3{
			background-color: red;
			width: 200px;
			height: 50px;
			font-size: 30px;
			color: white;
		}
	</style>
</head>
<body>
<div class="b1">Box 1</div>
<div class="b2">Box 2</div>
<div class="b3">Box 3</div>
</body>
</html>
Output
Box 1
Box 2
Box 3
Now, Let us add display: none property as follows and see the result 
.b2{
	background-color: yellow;
	width: 200px;
	height: 50px;
	font-size: 30px;
	color: white;
	display: none;
    }
Output
Box 1
Box 2
Box 3
As you saw in the above example Box 2 is hidden totally with its space and Box 3 is shifted upward and takes the space of Box 2.


Visibility:hidden
Visibility: hidden is also a CSS property used to hide an element on the webpage. It is similar to display: none property except It hides only the element but the space taken by the element is remains the same. It defines whether the element is visible or not.
Example
Let us change visibility: hidden instead of display: none from the above example as follows and see the result
.b2{
	background-color: yellow;
	width: 200px;
	height: 50px;
	font-size: 30px;
	color: white;
	visibility: hidden;
    }
Output
Box 1
Box 2
Box 3
As you saw in the above example Box 2 is hidden but the space taken by Box 2 is kept.