CSS: What Does the display: none; Property Do?

In web development, controlling element visibility is a core part of managing user interfaces, interactivity, and layout behavior. One of the most direct ways to hide an element from view is by using the CSS property:

👉 display: none;

So, what exactly does it do, and when should you use it? Let’s explore.

✅ What display: none; Does

When you apply display: none; to an element:

• It completely removes the element from the page layout.
• The element becomes invisible, and
• It does not occupy any space in the document flow.

📌 Example:

.hidden-box {
  display: none;
}

<div class="hidden-box">This box will not be displayed.</div>

In this example, the <div> will not appear on the screen at all — and it won’t leave behind a blank space.

✅ Use Cases

• Temporarily hiding elements via JavaScript
• Managing responsive layouts (e.g., hiding nav on small screens)
• Controlling visibility of modal dialogs, dropdowns, and tabs
• Removing elements that shouldn’t be printed (@media print)

✅ Comparison: display: none; vs. visibility: hidden;

So, if you want to hide an element and remove it from layout, use display: none;.
If you want to hide it but keep its space, use visibility: hidden;.

✅ Toggle Display with JavaScript

document.getElementById("myDiv").style.display = "none"; // Hide
document.getElementById("myDiv").style.display = "block"; // Show

This is commonly used for toggling menus, modals, or tabs dynamically.

🧾 Summary

🧠 Conclusion

The display: none; property is a powerful and simple tool to completely hide elements from both view and layout. It’s commonly used in dynamic interfaces, responsive design, and user interactions where temporary visibility control is needed.

Pro Tip: When you hide elements with display: none;, they’re not accessible to screen readers. Use it carefully if accessibility is a concern.