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 <table> 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
-
Block — Three boxes, each occupying a new line and taking the full width of the parent. This is the default behavior of
<div>. -
Inline — Three span elements flowing in the same line with the surrounding text. Note that their width/height cannot be set.
-
Inline-Block — A combination of block and inline. Three boxes flowing in one line (inline), but with settable width and height (block).
-
None vs Visible — The box using
visibility: hiddenstill takes up space (the space is empty but present), while the box usingdisplay: nonedisappears completely and no space is allocated. -
Flexbox — A purple container with
display: flexarranging its items horizontally with a uniform gap. It also shows perfect centering withalign-items: center; justify-content: center. -
Grid — A green container with
display: gridcreating a 3-column grid. One item usesgrid-column: span 2to span two columns. -
List Item — Elements rendered as list items with different marker types: disc (round dot), circle (hollow circle), and square (square).
-
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: noneis very useful for toggle/accordion features with JavaScript.