The CSS display property controls the layout behavior and outer rendering type of an element on a web page, determining whether an element starts on a new line or sits side-by-side.
The display property accepts several primary layout values:
.box-block { display: block; }
.box-inline { display: inline; }
.box-inline-block { display: inline-block; }
.box-flex { display: flex; }
.box-grid { display: grid; }
.box-hidden { display: none; }
Display values explained:
block: Starts on a new line and expands to 100% of parent width.inline: Sits side-by-side with text content; ignores top/bottom margins and height settings.inline-block: Sits side-by-side like inline elements, but respects custom width, height, and margins.flex: Converts element into a 1D flexbox layout container.grid: Converts element into a 2D grid layout container.none: Removes the element entirely from the layout flow (hides it visually and from layout).flowchart TD
A["display Property Options"] --> B["block (Forces new line + 100% width)"]
A --> C["inline (Flows side-by-side with text)"]
A --> D["inline-block (Flows side-by-side + respects width/height)"]
A --> E["flex / grid (Activates modern CSS layout engine)"]
A --> F["none (Removes completely from DOM rendering layout)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Display Demonstration</title>
<style>
.badge-item {
display: inline-block;
width: 120px;
padding: 8px;
background-color: #1e293b;
color: #38bdf8;
border: 1px solid #334155;
border-radius: 4px;
text-align: center;
margin-right: 10px;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Inline-Block Element Flow</h2>
<div>
<div class="badge-item">Badge 1</div>
<div class="badge-item">Badge 2</div>
<div class="badge-item">Badge 3</div>
</div>
</body>
</html>
display: none to hide elements conditionally: Completely removes elements from visual layout flow (unlike visibility: hidden).display: flex or display: grid for modern component layouts: Avoid using legacy display: inline-block hacks for multi-column grids.display: inline-block for custom button tags: Allows applying custom padding and height to inline elements.Create a CSS class .hide that removes an element completely from the layout flow using display: none;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.