In this tutorial, we will learn how to hide a div element on a webpage using CSS. Hiding elements can be useful in various scenarios, such as creating dynamic interfaces, managing content visibility, or controlling user interactions
Table of Contents
- Hiding a
divUsing CSS - Example: HTML and CSS Code
Hiding a div using CSS. To hide a div element, we can use the display or visibility property in CSS.
display: none;
This completely removes the element from the document flow, making it as if it doesn’t exist.
visibility: hidden;
This hides the element but still takes up the space in the layout.
HTML and CSS Code
Here is a complete example demonstrating how to hide a div element using both display: none; and visibility: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide DIV Example</title>
<style>
.blue-box { background-color: blue; width: 150px; height: 150px; margin: 20px; }
.yellow-box { background-color: yellow; width: 150px; height: 150px; margin: 20px; }
.green-box { background-color: green; width: 150px; height: 150px; margin: 20px; }
/* Hide using display: none; */
.hidden-display {
display: none;
}
/* Hide using visibility: hidden; */
.hidden-visibility {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Hide DIV Element Using CSS</h1>
<div class="blue-box"></div>
<div class="yellow-box hidden-display"></div>
<div class="green-box hidden-visibility"></div>
<p>Note: The yellow box is hidden using <code>display: none;</code> and the green box is hidden using <code>visibility: hidden;</code>.</p>
</body>
</html>
Explanation
-
- The HTML code includes an <h1> tag and three <div> elements with different class names (blue-box, yellow-box, green-box).
- The yellow-box is hidden using display: none;, so it will not appear on the page at all.
- The green-box is hidden using visibility: hidden;, so it will not be visible, but its space will still be occupied in the layout.
Output - The blue box will be visible.
- The yellow box will be completely removed from the document flow.
- The green box will be hidden but still take up space on the page.
This is how you can hide a div element using CSS.