? CSS `display` Property

⚡ Quick Overview

The display property in CSS controls how an element is rendered on the page. It decides whether an element behaves like a block, inline item, flexible container, grid container, and more.

It is one of the most important layout properties and directly affects how elements line up, wrap, and take up space in a layout.

? Key Concepts

Block elements start on a new line and take the full available width (e.g. <div>).
Inline elements do not start on a new line and only take as much width as needed (e.g. <span>).
Inline-block elements behave like inline elements but can have width/height like block elements.
Flex containers use the Flexbox model to align and distribute space among items.
Every HTML element has a default display type, which you can override using CSS.

? Syntax

Basic syntax of the display property:

? View Code Example

/* Basic syntax of the display property */
selector {
display: value;
}

? Common Values

block – element acts as a block-level box and takes full width.
inline – element flows with text and does not force a line break.
inline-block – inline element that can have width and height.
flex – element becomes a flex container, and its children become flex items.

? Code Examples

1️⃣ Block vs Inline vs Inline-Block

? View Code Example

/* Comparing different display values */
.block-box {
display: block;
background: lightblue;
padding: 8px;
margin-bottom: 4px;
}

.inline-box {
display: inline;
background: lightgreen;
padding: 4px;
}

.inline-block-box {
display: inline-block;
background: lightcoral;
padding: 8px;
margin: 4px;
width: 120px;
text-align: center;
}

? View Code Example

<!-- Example HTML using the classes above -->
<div class="block-box">I am block</div>

Some text
<span class="inline-box">inline 1</span>
<span class="inline-box">inline 2</span>
continues on the same line...

<div class="inline-block-box">inline-block A</div>
<div class="inline-block-box">inline-block B</div>

2️⃣ Flexbox with `display: flex`

? View Code Example

/* Parent uses flex, children become flex items */
.flex-container {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
}

.flex-item {
padding: 10px 16px;
background: steelblue;
color: white;
border-radius: 6px;
}

? View Code Example

<!-- Flexbox HTML structure -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>

? Live Output / Explanation

Here is a tiny inline example to visualize block vs inline-block vs flex using inline styles:

Visual Idea (Conceptual)

Block: each box goes on a new line and stretches horizontally.

Inline-block: boxes sit on the same line if there is enough space and can have width/height.

Flex: the parent decides how to distribute space between items (e.g., centered row of items).

Remember: the display value is always applied to the element itself, and it affects how that element and its children participate in the layout.

? Tips & Best Practices

Use display: flex; when you need to align items horizontally or vertically in a responsive way.
Use display: inline; for small pieces of content that should flow with text (like icons or badges).
Use display: inline-block; when you want inline items but need to control their width/height.
Always remember that the parent of flex items must have display: flex; applied.
Check the default display of elements (e.g. <div> is block, <span> is inline) before overriding.

? Try It Yourself

Create three <div> elements and style them as block, inline, and inline-block. Observe how they behave on the page.
Build a simple horizontal navigation bar using display: inline-block; for menu items.
Create a flex container with at least four items and experiment with justify-content and align-items values.
Inspect elements in the browser DevTools and check their computed display value.
Convert an existing layout from block/inline-block to flex and notice how much easier alignment becomes.