CssConceptBeginner · 3 min read

What is display none in CSS: Explanation and Usage

display: none; in CSS completely hides an element from the webpage, removing it from the layout so it takes up no space. Unlike visibility: hidden;, the element is not visible and does not affect the page layout at all.

⚙️

How It Works

Think of display: none; like turning off a light in a room and removing the furniture from that room entirely. The space where the furniture was is now empty, and you can’t see or interact with anything there.

When you apply display: none; to an element, the browser acts as if the element is not there at all. It does not show the element, and it does not reserve any space for it on the page. This is different from just hiding the element’s content but keeping its space.

This makes display: none; useful when you want to completely remove something from the page temporarily, like hiding a menu or a popup until it’s needed.

💻

Example

This example shows a paragraph that is hidden using display: none;. It will not appear on the page and will not take up any space.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None Example</title>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>
  <p>This paragraph is visible.</p>
  <p class="hidden">This paragraph is hidden and takes no space.</p>
  <p>This paragraph is also visible.</p>
</body>
</html>

Output

This paragraph is visible. This paragraph is also visible.

🎯

When to Use

Use display: none; when you want to completely hide an element and remove it from the page layout. This is helpful for:

Hiding menus or dropdowns until a user clicks a button.
Temporarily removing content without deleting it from the HTML.
Creating tabs or sections that show and hide content dynamically.
Improving accessibility by hiding elements that should not be read by screen readers.

Remember, since the element is removed from layout, it won’t be focusable or clickable while hidden.

✅

Key Points

display: none; hides the element and removes it from the page layout.
The element takes up no space and is not visible or interactive.
Different from visibility: hidden;, which hides but keeps space.
Commonly used for menus, modals, and dynamic content.
Hidden elements are not focusable or accessible by keyboard.

✅

Key Takeaways

display: none; completely hides an element and removes it from the page layout.

Hidden elements take up no space and are not visible or interactive.

Use it to hide content like menus or popups until needed.

It differs from visibility: hidden; which keeps space reserved.

Hidden elements cannot be focused or accessed by keyboard.