Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Display None Using in CSS

CSS Web Development Front End Technology

CSS display: none is used to completely hide an element from the webpage. When an element has display: none, it is removed from the document flow and takes up no space on the page. The element and all its child elements become invisible and are not rendered by the browser.

Syntax

selector {
    display: none;
}

Key Characteristics

  • Element is completely removed from the document flow
  • Takes up no space on the page
  • Child elements are also hidden, regardless of their display property
  • Different from visibility: hidden, which hides the element but preserves its space

Example 1: Basic Display None

The following example demonstrates how display: none completely hides elements −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        gap: 10px;
        margin: 20px;
    }
    
    .box {
        width: 100px;
        height: 100px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
    
    .box1 { background-color: #FF6B6B; }
    .box2 { background-color: #4ECDC4; }
    .box3 { 
        background-color: #45B7D1;
        display: none; /* This box will be hidden */
    }
    .box4 { background-color: #96CEB4; }
</style>
</head>
<body>
    <div class="container">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
        <div class="box box4">Box 4</div>
    </div>
</body>
</html>

Three boxes (Box 1, Box 2, and Box 4) appear in a row. Box 3 is completely hidden and takes no space, so Box 4 appears directly after Box 2.

Example 2: Interactive Hide/Show

This example shows how to toggle element visibility using JavaScript −

<!DOCTYPE html>
<html>
<head>
<style>
    .content {
        background-color: #f0f8ff;
        padding: 20px;
        border: 2px solid #4CAF50;
        border-radius: 5px;
        margin: 20px;
        text-align: center;
    }
    
    button {
        background-color: #008CBA;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 10px;
    }
    
    button:hover {
        background-color: #007B9A;
    }
    
    .hidden {
        display: none;
    }
</style>
</head>
<body>
    <button onclick="toggleContent()">Toggle Content</button>
    
    <div id="content" class="content">
        <h3>This content can be hidden!</h3>
        <p>Click the button above to hide or show this content using display: none.</p>
    </div>
    
    <script>
        function toggleContent() {
            const content = document.getElementById('content');
            content.classList.toggle('hidden');
        }
    </script>
</body>
</html>

A button labeled "Toggle Content" appears above a blue bordered content box. Clicking the button hides/shows the content completely, with no space reserved when hidden.

Display None vs Visibility Hidden

Property Space Occupied Accessibility Use Case
display: none No space Hidden from screen readers Completely remove elements
visibility: hidden Preserves space Still accessible Hide but maintain layout

Conclusion

The display: none property is essential for hiding elements completely from the webpage. Unlike visibility: hidden, it removes the element from the document flow entirely, making it ideal for dynamic content management and responsive design.

Updated on: 2026-03-15T14:02:40+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements