Skillversitas

CSS Display Property

What is Display?

The display property determines how an element is rendered on the web page. It is one of the most fundamental CSS properties because it affects:

  • Rendering flow — Whether the element takes a full line or only as wide as its content
  • Box model behavior — How width, height, margin, and padding work
  • Layout capabilities — Whether the element can use flex, grid, or positioning

Main Display Values

block

A block element takes the full width of its parent (or as much as allowed) and always starts on a new line.

Example block elements: <div>, <p>, <h1> - <h6>, <section>, <article>

display: block;

inline

An inline element only takes as much width as its content and does not start a new line. Width, height, and top/bottom margins have no effect on inline elements.

Example inline elements: <span>, <a>, <strong>, <em>

display: inline;

inline-block

A combination of block and inline. The element still flows inline (it does not start a new line), but width, height, margin, and padding can be set like a block.

display: inline-block;

none

The element is completely removed from rendering. It takes up no space at all and is not visible. This is different from visibility: hidden, which still takes up space.

display: none;

flex

The element becomes a flex container. This activates Flexbox layout for its children (flex items). Very powerful for one-dimensional layouts.

display: flex;

grid

The element becomes a grid container. This activates CSS Grid layout for its children. Powerful for two-dimensional layouts (rows and columns).

display: grid;

list-item

The element is rendered as a list item, similar to <li>. By default it includes a marker (bullet or number).

display: list-item;

table

The element is rendered like <table>, <tr>, <td>, etc. Useful for creating tables without HTML table elements, or for vertical centering.

display: table;
display: table-cell;
display: table-row;

contents

The element itself is not rendered — only its content appears. Useful for "dissolving" a wrapper element.

display: contents;

inline-flex and inline-grid

Similar to flex and grid, but the container still flows inline.

display: inline-flex;
display: inline-grid;

Code Example

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

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
      color: #333;
    }

    h1 {
      margin-bottom: 25px;
    }

    .section {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    h2 {
      margin-bottom: 15px;
      color: #2c3e50;
    }

    p {
      line-height: 1.6;
      color: #555;
      margin-bottom: 10px;
    }

    code {
      background-color: #f0f0f0;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 13px;
    }

    .demo-box {
      padding: 10px 15px;
      margin: 5px;
      font-size: 13px;
      font-weight: bold;
      color: white;
      border-radius: 4px;
    }

    /* === Block Display === */
    .block-1 { background-color: #e74c3c; display: block; }
    .block-2 { background-color: #3498db; display: block; }
    .block-3 { background-color: #2ecc71; display: block; }

    /* === Inline Display === */
    .inline-1 { background-color: #e74c3c; display: inline; }
    .inline-2 { background-color: #3498db; display: inline; }
    .inline-3 { background-color: #2ecc71; display: inline; }

    .inline-notice {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }

    /* === Inline-Block Display === */
    .inline-block-1 {
      background-color: #e74c3c;
      display: inline-block;
      width: 120px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }

    .inline-block-2 {
      background-color: #3498db;
      display: inline-block;
      width: 120px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }

    .inline-block-3 {
      background-color: #2ecc71;
      display: inline-block;
      width: 120px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }

    /* === None vs Visible === */
    .visibility-grid {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .vis-box {
      padding: 15px;
      background-color: #34495e;
      color: white;
      font-weight: bold;
      font-size: 13px;
      text-align: center;
      border-radius: 6px;
      flex: 1;
      min-width: 120px;
    }

    .vis-none { display: none; }
    .vis-hidden { visibility: hidden; }

    .placeholder {
      border: 2px dashed #ccc;
      padding: 15px;
      text-align: center;
      color: #999;
      font-size: 12px;
      flex: 1;
      min-width: 120px;
      border-radius: 6px;
    }

    /* === Flexbox Demo === */
    .flex-container {
      display: flex;
      gap: 10px;
      padding: 15px;
      background-color: #ecf0f1;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .flex-item {
      background-color: #9b59b6;
      color: white;
      padding: 15px 20px;
      font-size: 13px;
      font-weight: bold;
      border-radius: 4px;
      text-align: center;
    }

    .flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100px;
      background-color: #ecf0f1;
      border-radius: 6px;
    }

    .flex-center-item {
      background-color: #e67e22;
      color: white;
      padding: 15px 25px;
      font-weight: bold;
      border-radius: 4px;
    }

    /* === Grid Demo === */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 15px;
      background-color: #ecf0f1;
      border-radius: 6px;
    }

    .grid-item {
      background-color: #1abc9c;
      color: white;
      padding: 20px;
      font-size: 13px;
      font-weight: bold;
      border-radius: 4px;
      text-align: center;
    }

    .grid-item-wide {
      grid-column: span 2;
    }

    /* === List Item Demo === */
    .list-demo {
      padding-left: 0;
    }

    .list-item-1 {
      display: list-item;
      list-style-type: disc;
      padding: 8px 0 8px 20px;
      color: #555;
      border-bottom: 1px solid #eee;
    }

    .list-item-2 {
      display: list-item;
      list-style-type: circle;
      padding: 8px 0 8px 20px;
      color: #555;
      border-bottom: 1px solid #eee;
    }

    .list-item-3 {
      display: list-item;
      list-style-type: square;
      padding: 8px 0 8px 20px;
      color: #555;
    }

    /* === Inline Elements in Text === */
    .text-demo {
      background-color: #ecf0f1;
      padding: 20px;
      border-radius: 6px;
      line-height: 2;
      font-size: 15px;
      color: #333;
    }

    .highlight {
      background-color: #f1c40f;
      padding: 2px 6px;
      border-radius: 3px;
      font-weight: bold;
    }

    .bold-text {
      display: inline;
      font-weight: bold;
      color: #e74c3c;
    }

    .italic-text {
      display: inline;
      font-style: italic;
      color: #3498db;
    }

    /* === Table Display === */
    .table-display {
      display: table;
      width: 100%;
      border-collapse: collapse;
      border: 2px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
    }

    .table-row {
      display: table-row;
    }

    .table-row:nth-child(even) {
      background-color: #f9f9f9;
    }

    .table-cell {
      display: table-cell;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      color: #555;
    }

    .table-header {
      display: table-cell;
      background-color: #2c3e50;
      color: white;
      font-weight: bold;
      padding: 12px 16px;
      font-size: 14px;
    }

    /* === Contents Demo === */
    .contents-wrapper {
      background-color: #ecf0f1;
      padding: 20px;
      border-radius: 6px;
    }

    .contents-child {
      background-color: #e74c3c;
      color: white;
      padding: 10px 15px;
      margin-bottom: 5px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: bold;
    }

    .contents-child-2 {
      background-color: #3498db;
    }

    .contents-child-3 {
      background-color: #2ecc71;
    }

    /* === Hidden Element Demo === */
    .toggle-demo {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .toggle-content {
      padding: 15px;
      background-color: #ecf0f1;
      border-radius: 6px;
      font-size: 14px;
      color: #555;
    }

    .hidden-content {
      display: none;
    }

    .btn-toggle {
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      width: fit-content;
    }
  </style>
</head>
<body>

  <h1>CSS Display Property</h1>

  <!-- Block Display -->
  <div class="section">
    <h2>display: block</h2>
    <p>Block elements take up the full width and always start on a new line:</p>
    <div class="demo-box block-1">Block 1 — Full width</div>
    <div class="demo-box block-2">Block 2 — Starts a new line</div>
    <div class="demo-box block-3">Block 3 — Starts another new line</div>
  </div>

  <!-- Inline Display -->
  <div class="section">
    <h2>display: inline</h2>
    <p>Inline elements only take up the width of their content. Width and height CANNOT be set:</p>
    <div class="text-demo">
      Regular text, then
      <span class="inline-1">Inline 1</span>
      <span class="inline-2">Inline 2</span>
      <span class="inline-3">Inline 3</span>
      and the text continues on the same line. Notice how the three inline elements sit in one line and their width is only as wide as their content without taking the full width of the line.
    </div>
    <p class="inline-notice">Note: margin-top/bottom, width, and height have no effect on inline elements.</p>
  </div>

  <!-- Inline-Block Display -->
  <div class="section">
    <h2>display: inline-block</h2>
    <p>Inline-block: still flows inline, but width and height CAN be set:</p>
    <div class="text-demo">
      Text before.
      <div class="inline-block-1">IB 1</div>
      <div class="inline-block-2">IB 2</div>
      <div class="inline-block-3">IB 3</div>
      Text after.
    </div>
  </div>

  <!-- None vs Visible -->
  <div class="section">
    <h2>display: none vs visibility: hidden</h2>
    <p>
      <code>display: none</code> — The element disappears completely and takes no space at all.<br>
      <code>visibility: hidden</code> — The element is hidden but still takes up space.
    </p>
    <div class="visibility-grid">
      <div class="vis-box">Visible</div>
      <div class="vis-box vis-hidden">Hidden</div>
      <div class="placeholder">display: none — This space is empty because the element was removed entirely</div>
    </div>
  </div>

  <!-- Flexbox Display -->
  <div class="section">
    <h2>display: flex</h2>
    <p>Flexbox provides powerful layout control for aligning and distributing space:</p>
    <div class="flex-container">
      <div class="flex-item">Flex 1</div>
      <div class="flex-item">Flex 2</div>
      <div class="flex-item">Flex 3</div>
    </div>
    <p>Perfect centering with flexbox:</p>
    <div class="flex-center">
      <div class="flex-center-item">Centered!</div>
    </div>
  </div>

  <!-- Grid Display -->
  <div class="section">
    <h2>display: grid</h2>
    <p>CSS Grid for two-dimensional layouts (rows and columns):</p>
    <div class="grid-container">
      <div class="grid-item">Grid 1</div>
      <div class="grid-item">Grid 2</div>
      <div class="grid-item">Grid 3</div>
      <div class="grid-item grid-item-wide">Grid 4 (Span 2)</div>
      <div class="grid-item">Grid 5</div>
    </div>
  </div>

  <!-- List Item Display -->
  <div class="section">
    <h2>display: list-item</h2>
    <p>Rendering an element as a list item with a marker:</p>
    <ul class="list-demo">
      <li class="list-item-1">Disc — Round bullet point</li>
      <li class="list-item-2">Circle — Circle bullet point</li>
      <li class="list-item-3">Square — Square bullet point</li>
    </ul>
  </div>

  <!-- Table Display -->
  <div class="section">
    <h2>display: table</h2>
    <p>Creating a table without the HTML &lt;table&gt; element:</p>
    <div class="table-display">
      <div class="table-row">
        <div class="table-header">Name</div>
        <div class="table-header">Course</div>
        <div class="table-header">Score</div>
      </div>
      <div class="table-row">
        <div class="table-cell">John</div>
        <div class="table-cell">CSS Fundamental</div>
        <div class="table-cell">92</div>
      </div>
      <div class="table-row">
        <div class="table-cell">Mike</div>
        <div class="table-cell">CSS Layout</div>
        <div class="table-cell">88</div>
      </div>
      <div class="table-row">
        <div class="table-cell">Amy</div>
        <div class="table-cell">CSS Animation</div>
        <div class="table-cell">95</div>
      </div>
    </div>
  </div>

  <!-- Contents Display -->
  <div class="section">
    <h2>display: contents</h2>
    <p>The wrapper is not rendered; only its content appears as if the content were directly on the parent:</p>
    <div class="contents-wrapper">
      <div class="contents-child">Child 1 (directly in the wrapper)</div>
      <div class="contents-child contents-child-2">Child 2 (also directly in the wrapper)</div>
      <div class="contents-child contents-child-3">Child 3 (as if there were no wrapper)</div>
    </div>
  </div>

  <!-- Hidden Element -->
  <div class="section">
    <h2>display: none for Toggling Content</h2>
    <p>Using display: none to show/hide content dynamically:</p>
    <div class="toggle-demo">
      <button class="btn-toggle" onclick="toggleContent()">Toggle Content</button>
      <div class="toggle-content" id="toggleContent">
        This content can be hidden and shown again using JavaScript
        by changing the display value between none and block.
      </div>
    </div>
  </div>

  <script>
    function toggleContent() {
      var content = document.getElementById('toggleContent');
      if (content.style.display === 'none') {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    }
  </script>

</body>
</html>

Code Explanation

  1. Block — Three boxes, each occupying a new line and taking the full width of the parent. This is the default behavior of <div>.

  2. Inline — Three span elements flowing in the same line with the surrounding text. Note that their width/height cannot be set.

  3. Inline-Block — A combination of block and inline. Three boxes flowing in one line (inline), but with settable width and height (block).

  4. None vs Visible — The box using visibility: hidden still takes up space (the space is empty but present), while the box using display: none disappears completely and no space is allocated.

  5. Flexbox — A purple container with display: flex arranging its items horizontally with a uniform gap. It also shows perfect centering with align-items: center; justify-content: center.

  6. Grid — A green container with display: grid creating a 3-column grid. One item uses grid-column: span 2 to span two columns.

  7. List Item — Elements rendered as list items with different marker types: disc (round dot), circle (hollow circle), and square (square).

  8. Table — Elements rendered as a table using display: table, table-row, and table-cell. Useful for building tables without HTML <table> elements.


Everyday Use Cases

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

    /* === Navigation Bar === */
    .navbar {
      background-color: #2c3e50;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .navbar-brand {
      color: white;
      font-size: 18px;
      font-weight: bold;
      padding: 15px 0;
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 5px;
    }

    .nav-links a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 15px 16px;
      font-size: 14px;
      border-radius: 4px;
    }

    .nav-links a:hover {
      background-color: #34495e;
    }

    /* === Hero Section === */
    .hero {
      background-color: #3498db;
      color: white;
      padding: 60px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 32px;
      margin-bottom: 15px;
    }

    .hero p {
      font-size: 16px;
      opacity: 0.9;
      max-width: 500px;
      margin: 0 auto 25px;
      line-height: 1.6;
    }

    .hero-buttons {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-block;
      padding: 12px 28px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      font-size: 14px;
    }

    .btn-primary {
      background-color: white;
      color: #3498db;
    }

    .btn-outline {
      border: 2px solid white;
      color: white;
      background-color: transparent;
    }

    /* === Dashboard Layout === */
    .dashboard {
      max-width: 1000px;
      margin: 30px auto;
      padding: 0 20px;
    }

    .dashboard h2 {
      font-size: 22px;
      margin-bottom: 20px;
      color: #2c3e50;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
    }

    .stat-card {
      background-color: white;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      text-align: center;
    }

    .stat-card h3 {
      font-size: 14px;
      color: #888;
      margin-bottom: 8px;
    }

    .stat-card .stat-value {
      font-size: 32px;
      font-weight: bold;
      color: #2c3e50;
    }

    .stat-card .stat-label {
      font-size: 12px;
      color: #2ecc71;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="navbar-brand">SkillVersitas</div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <section class="hero">
    <h1>Learn CSS from Zero</h1>
    <p>Master CSS from the basics to advanced with practical tutorials.</p>
    <div class="hero-buttons">
      <a href="#" class="btn btn-primary">Start Learning</a>
      <a href="#" class="btn btn-outline">See Demo</a>
    </div>
  </section>

  <div class="dashboard">
    <h2>Dashboard</h2>
    <div class="dashboard-grid">
      <div class="stat-card">
        <h3>Total Students</h3>
        <div class="stat-value">12,345</div>
        <div class="stat-label">+15% this month</div>
      </div>
      <div class="stat-card">
        <h3>Active Courses</h3>
        <div class="stat-value">48</div>
        <div class="stat-label">+3 new courses</div>
      </div>
      <div class="stat-card">
        <h3>Average Rating</h3>
        <div class="stat-value">4.8</div>
        <div class="stat-label">out of 5.0</div>
      </div>
      <div class="stat-card">
        <h3>Completed Today</h3>
        <div class="stat-value">156</div>
        <div class="stat-label">+28% from yesterday</div>
      </div>
    </div>
  </div>
</body>
</html>

The example above demonstrates the use of display in a real context:
- Navbar — display: flex to arrange the brand and navigation horizontally with justify-content: space-between
- Nav links — display: flex on the <ul> and display: block on the <a> so the links take up the full click area
- Hero buttons — display: flex with justify-content: center for centering the buttons
- Dashboard — display: grid with responsive columns for the stat cards


Quick Comparison

Display Width/Height Starts New Line Can Align
block Settable Yes Flex/Grid parent
inline NOT settable No Flex/Grid parent
inline-block Settable No Flex/Grid parent
flex Settable Controllable Flex container
grid Settable Controllable Grid container
none None None None

Conclusion

  • block — Takes full width, starts a new line. For structural elements like div, p, section.
  • inline — Only as wide as its content, does not start a new line. For inline elements like span, a, strong.
  • inline-block — Flows inline but its width/height can be set.
  • none — Removes the element completely from rendering and from the space.
  • flex — Activates Flexbox layout for children. Very powerful for one-dimensional layouts.
  • grid — Activates CSS Grid layout for children. Powerful for two-dimensional layouts.
  • list-item — Renders the element as a list item with a marker.
  • contents — The wrapper is not rendered, only its content appears.
  • display: none is very useful for toggle/accordion features with JavaScript.