|

CSS 16 💻 display property

Bykronos

The display property is one of the most important CSS properties. It controls how an element is displayed on a webpage and how it behaves in the document flow.

Overview of display Values

ValueDescriptionIn Flow?Dimensions?Line Breaks?
inlineFlows with text✅ Yes❌ No❌ No
blockStarts on new line, full width✅ Yes✅ Yes✅ Yes
inline-blockFlows with text, but respects dimensions✅ Yes✅ Yes❌ No
flexBlock-level flex container✅ Yes✅ Yes✅ Yes
inline-flexInline-level flex container✅ Yes✅ Yes❌ No
gridBlock-level grid container✅ Yes✅ Yes✅ Yes
inline-gridInline-level grid container✅ Yes✅ Yes❌ No
noneHides the element❌ No❌ No❌ No

1. display: inline

The element takes up only as much horizontal space as necessary for its content. It does not generate line breaks before or after itself. You cannot set its width and height.

.inline {
    display: inline;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

Key Points:

  • No line breaks before/after
  • Width and height are ignored
  • Padding and margin work horizontally but not vertically
  • Common inline elements: <span>, <a>, <strong>, <em>, <img>

2. display: block

The element starts on a new line and takes up the full width of its parent. You can set its width and height.

.block {
    display: block;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

Key Points:

  • Starts on a new line
  • Takes full width of parent
  • Width and height work
  • Common block elements: <div>, <p>, <h1>–<h6>, <ul>, <li>

3. display: inline-block

The element behaves like a block element but maintains inline behavior — no line breaks before or after. You can set its width and height.

.inline-block {
    display: inline-block;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

Key Points:

  • Flows with text (no line breaks)
  • Width and height work
  • Margin, border, and padding work on all sides
  • Great for navigation menus, buttons, and image galleries

4. display: flex

The element behaves like a block element but lays out its contents according to the flexbox model. It arranges its children in a single row or column.

.flex {
    display: flex;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

Key Points:

  • Block-level container
  • Children become flex items
  • Great for one-dimensional layouts (rows or columns)
  • Allows flexible alignment, ordering, and spacing

5. display: grid

The element behaves like a block element but lays out its contents according to the grid model. It arranges its children in a two-dimensional grid.

.grid {
    display: grid;
    background-color: #ddd;
    margin: 5px;
    padding: 10px;
}

Key Points:

  • Block-level container
  • Children become grid items
  • Great for two-dimensional layouts (rows and columns)
  • Allows complex arrangements of elements

6. display: none

The element is completely removed from the document flow. It takes up no space and is not rendered.

.hidden {
    display: none;
}

Key Points:

  • Element is not displayed
  • Takes up no space in the layout
  • Can be toggled with JavaScript for show/hide functionality

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The display Property</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 2px dashed #ddd;
            background: #f8f9fa;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== DISPLAY DEMOS ====== */
        .inline-demo {
            display: inline;
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
            margin: 5px;
        }

        .block-demo {
            display: block;
            background-color: #28a745;
            color: white;
            padding: 10px 15px;
            margin: 5px 0;
        }

        .inline-block-demo {
            display: inline-block;
            background-color: #dc3545;
            color: white;
            padding: 10px 15px;
            margin: 5px;
            width: 150px;
            text-align: center;
        }

        .flex-demo {
            display: flex;
            background-color: #ffc107;
            color: #333;
            padding: 10px;
            margin: 5px 0;
            gap: 10px;
        }

        .flex-demo > div {
            background: white;
            padding: 10px 20px;
            border-radius: 4px;
        }

        .grid-demo {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: #6c5ce7;
            color: white;
            padding: 10px;
            margin: 5px 0;
        }

        .grid-demo > div {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px;
            border-radius: 4px;
            text-align: center;
        }

        .none-demo {
            display: none;
        }

        .hidden-note {
            color: #dc3545;
            font-style: italic;
        }
    </style>
</head>
<body>

    <h1>The display Property</h1>

    <!-- ====== 1. INLINE ====== -->
    <section>
        <h2>1. display: inline</h2>
        <p>The element takes up only as much space as needed. Width and height are ignored. No line breaks.</p>

        <div class="demo-box">
            <div class="inline-demo">Inline 1</div>
            <div class="inline-demo">Inline 2</div>
            <span class="inline-demo">Inline 3</span>
            <div class="inline-demo">Inline 4</div>
            <p>Notice how the elements flow inline — they don't start on a new line.</p>
        </div>

        <div class="code-block">
            .inline {
                display: inline;
                /* width and height are IGNORED */
            }
        </div>
    </section>

    <!-- ====== 2. BLOCK ====== -->
    <section>
        <h2>2. display: block</h2>
        <p>The element starts on a new line and takes up the full width of its parent.</p>

        <div class="demo-box">
            <div class="block-demo">Block 1</div>
            <div class="block-demo">Block 2</div>
            <div class="block-demo">Block 3</div>
            <p>Notice how each block starts on a new line and takes the full width.</p>
        </div>

        <div class="code-block">
            .block {
                display: block;
                width: 100%; /* Full width of parent */
                /* Starts on a new line */
            }
        </div>
    </section>

    <!-- ====== 3. INLINE-BLOCK ====== -->
    <section>
        <h2>3. display: inline-block</h2>
        <p>Behaves like a block element but flows inline. Width and height work.</p>

        <div class="demo-box">
            <div class="inline-block-demo">Inline-Block 1</div>
            <div class="inline-block-demo">Inline-Block 2</div>
            <div class="inline-block-demo">Inline-Block 3</div>
            <span class="inline-block-demo">Inline-Block 4</span>
            <p>Notice how they flow inline but respect width and height.</p>
        </div>

        <div class="code-block">
            .inline-block {
                display: inline-block;
                width: 150px;  /* Width works */
                height: 50px;  /* Height works */
                /* Flows inline — no line breaks */
            }
        </div>
    </section>

    <!-- ====== 4. FLEX ====== -->
    <section>
        <h2>4. display: flex</h2>
        <p>The element becomes a flex container. Its children become flex items arranged in a row or column.</p>

        <div class="demo-box">
            <div class="flex-demo">
                <div>Flex Item 1</div>
                <div>Flex Item 2</div>
                <div>Flex Item 3</div>
            </div>
            <p>Children are arranged in a row with equal spacing.</p>
        </div>

        <div class="code-block">
            .flex {
                display: flex;
                gap: 10px; /* Space between items */
            }
        </div>
    </section>

    <!-- ====== 5. GRID ====== -->
    <section>
        <h2>5. display: grid</h2>
        <p>The element becomes a grid container. Its children become grid items arranged in a two-dimensional grid.</p>

        <div class="demo-box">
            <div class="grid-demo">
                <div>Grid Item 1</div>
                <div>Grid Item 2</div>
                <div>Grid Item 3</div>
                <div>Grid Item 4</div>
                <div>Grid Item 5</div>
                <div>Grid Item 6</div>
            </div>
            <p>Children are arranged in a 3-column grid.</p>
        </div>

        <div class="code-block">
            .grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 6. NONE ====== -->
    <section>
        <h2>6. display: none</h2>
        <p>The element is completely removed from the document flow. It takes up no space.</p>

        <div class="demo-box">
            <p>This text is visible.</p>
            <p class="none-demo">This text has display: none — you shouldn't see it!</p>
            <p>This text is also visible.</p>
            <p class="hidden-note">The hidden paragraph takes up no space.</p>
        </div>

        <div class="code-block">
            .none {
                display: none; /* Completely removed from flow */
            }
        </div>
    </section>

    <!-- ====== 7. COMPARISON ====== -->
    <section>
        <h2>7. Side-by-Side Comparison</h2>

        <h3>inline vs inline-block vs block</h3>
        <div class="demo-box">
            <div style="display: inline; background: #007bff; color: white; padding: 5px 10px; margin: 5px;">
                inline
            </div>
            <div style="display: inline; background: #007bff; color: white; padding: 5px 10px; margin: 5px;">
                inline
            </div>
            <div style="display: inline-block; background: #dc3545; color: white; padding: 10px 15px; margin: 5px; width: 120px; text-align: center;">
                inline-block
            </div>
            <div style="display: inline-block; background: #dc3545; color: white; padding: 10px 15px; margin: 5px; width: 120px; text-align: center;">
                inline-block
            </div>
            <div style="display: block; background: #28a745; color: white; padding: 10px 15px; margin: 5px 0;">
                block
            </div>
            <div style="display: block; background: #28a745; color: white; padding: 10px 15px; margin: 5px 0;">
                block
            </div>
        </div>

        <div class="code-block">
            /* inline — no width/height, no line breaks */
            display: inline;

            /* inline-block — width/height work, no line breaks */
            display: inline-block;

            /* block — width/height work, line breaks before/after */
            display: block;
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>8. Reference Tables</h2>

        <h3>display Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>In Flow?</th>
                <th>Dimensions?</th>
                <th>Line Breaks?</th>
                <th>Common Elements</th>
            </tr>
            <tr>
                <td><code>inline</code></td>
                <td>✅ Yes</td>
                <td>❌ No</td>
                <td>❌ No</td>
                <td><code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;strong&gt;</code></td>
            </tr>
            <tr>
                <td><code>block</code></td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td><code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code></td>
            </tr>
            <tr>
                <td><code>inline-block</code></td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>❌ No</td>
                <td>—</td>
            </tr>
            <tr>
                <td><code>flex</code></td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>—</td>
            </tr>
            <tr>
                <td><code>inline-flex</code></td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>❌ No</td>
                <td>—</td>
            </tr>
            <tr>
                <td><code>grid</code></td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>—</td>
            </tr>
            <tr>
                <td><code>inline-grid</code></td>
                <td>✅ Yes</td>
                <td>✅ Yes</td>
                <td>❌ No</td>
                <td>—</td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>❌ No</td>
                <td>❌ No</td>
                <td>❌ No</td>
                <td>—</td>
            </tr>
        </table>

        <h3>When to Use Which</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Best For</th>
            </tr>
            <tr>
                <td><code>inline</code></td>
                <td>Text-level elements, links, emphasis</td>
            </tr>
            <tr>
                <td><code>block</code></td>
                <td>Page structure, paragraphs, headings, divs</td>
            </tr>
            <tr>
                <td><code>inline-block</code></td>
                <td>Navigation items, buttons, image galleries</td>
            </tr>
            <tr>
                <td><code>flex</code></td>
                <td>One-dimensional layouts (rows/columns), navigation bars</td>
            </tr>
            <tr>
                <td><code>grid</code></td>
                <td>Two-dimensional layouts, page layouts, complex arrangements</td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>Hiding elements (toggles with JavaScript)</td>
            </tr>
        </table>
    </section>

    <!-- ====== BEST PRACTICES ====== -->
    <section>
        <h2>9. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>inline</code> for text-level elements</li>
                <li>Use <code>block</code> for structural elements</li>
                <li>Use <code>inline-block</code> for horizontal navigation items</li>
                <li>Use <code>flex</code> for one-dimensional layouts</li>
                <li>Use <code>grid</code> for two-dimensional layouts</li>
                <li>Use <code>display: none</code> to hide elements completely</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use <code>inline</code> for elements that need width/height</li>
                <li>Don't use <code>block</code> for text-level elements</li>
                <li>Don't use <code>display: none</code> for accessibility — use <code>visibility: hidden</code> or <code>aria-hidden</code> instead</li>
                <li>Don't use <code>inline-block</code> when <code>flex</code> would be cleaner</li>
                <li>Don't use <code>display</code> to change the semantic meaning of elements</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

ValueIn Flow?Dimensions?Line Breaks?Common Elements
inline✅ Yes❌ No❌ No<span>, <a>, <strong>
block✅ Yes✅ Yes✅ Yes<div>, <p>, <h1>
inline-block✅ Yes✅ Yes❌ No—
flex✅ Yes✅ Yes✅ Yes—
inline-flex✅ Yes✅ Yes❌ No—
grid✅ Yes✅ Yes✅ Yes—
inline-grid✅ Yes✅ Yes❌ No—
none❌ No❌ No❌ No—

Best Practices

✅ Do This:

/* Use flex for one-dimensional layouts */
.nav {
    display: flex;
    gap: 20px;
}

/* Use grid for two-dimensional layouts */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* Use inline-block for buttons in a row */
.btn {
    display: inline-block;
    padding: 10px 20px;
}

/* Hide elements completely */
.hidden {
    display: none;
}

❌ Don’t Do This:

/* Don't use inline for elements that need dimensions */
.box {
    display: inline;
    width: 200px;  /* Ignored! */
    height: 100px; /* Ignored! */
}

/* Don't use block for text-level elements */
.highlight {
    display: block;  /* Breaks the text flow */
}

/* Don't use display: none for accessibility */
.screen-reader-only {
    display: none;  /* Screen readers will ignore it too */
    /* Use position: absolute; left: -9999px; instead */
}

Pro Tip: Use display: flex for one-dimensional layouts (rows or columns) and display: grid for two-dimensional layouts. Use inline-block for horizontal navigation items and buttons. Remember that display: none removes the element completely — use it for show/hide functionality, but avoid it for accessibility purposes (use visibility: hidden or visually-hidden CSS instead)!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!