Concept:
In CSS, the display property controls how an element is shown on the web page — basically, how it behaves in the layout. It decides whether an element acts like a block, sits inline with text, becomes a flexbox container, grid, or even disappears from the layout entirely.
🧱 Common Display Values:
| Value |
Description |
Example |
| block |
Element takes up the full width of its parent. Starts on a new line. |
<div>,<p>,<h1> |
| inline |
Element only takes up as much width as its content needs. Doesn’t start on a new line. |
<span>,<a>,<b> |
| inline-block |
Like inline, but you can still set width and height and vertical margin/padding. |
Great for buttons & icons |
| none |
Hides the element completely — it’s not visible and doesn’t take up space. |
Used to toggle visibility dynamically |
| flex |
Turns the element into a **block-level** flex container that can align child elements horizontally or vertically. |
Perfect for responsive layout |
| grid |
Turns the element into a **block-level** grid container with rows and columns. |
Excellent for advanced layout |
| inline-flex |
Same as flex, but behaves **inline** with surrounding text. |
Useful for small horizontal groups |
| inline-grid |
Same as grid, but behaves **inline** with surrounding text. |
Rare, but sometimes handy |
| contents |
Makes the container element disappear from the layout while keeping its child elements visible in its place. |
Useful for semantic grouping without layout impact |
🧱 1. display: block =>
Takes the full width of its parent container and starts on a new line.
<style>
.block {
display: block;
background: steelblue;
color: white;
padding: 10px;
margin: 5px 0;
}
</style>
<div class="block">I’m a block element</div>
<div class="block">I start on a new line</div>
Output:
I’m a block element
I start on a new line
Result:
Each box appears on its own line, stacking vertically like paragraphs.
✏️ 2. display: inline:
Flows in the same line as text; width and height can’t be controlled.
<style>
.inline {
display: inline;
background: lightgreen;
padding: 5px;
}
</style>
<p>
This is <span class="inline">inline text</span> inside a sentence.
</p>
Output:
This is inline text inside a sentence.
📦 3. display: inline-block:
Flows in the same line as text, but you **can** set `width`, `height`, and vertical margins.
<style>
.inline-block {
display: inline-block;
background: gold;
padding: 10px;
margin: 10px;
width: 150px;
text-align: center;
}
</style>
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>
Output:
Box 1
Box 2
Box 3
Result:
The boxes appear next to each other (inline) and respect the set width and vertical margins.
🔗 4. display: flex:
Turns the element into a **block-level** Flex Container, allowing children to be easily arranged in a single row or column.
<style>
.flex-container {
display: flex;
background: #333;
padding: 10px;
justify-content: space-around;
}
.flex-item {
background: tomato;
color: white;
padding: 15px;
margin: 5px;
}
</style>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
</div>
Output:
Result:
The items are automatically lined up horizontally and spaced evenly within the container.
🌐 5. display: grid:
Turns the element into a **block-level** Grid Container, allowing children to be placed into a complex two-dimensional layout (rows and columns).
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 100px;
background: purple;
padding: 10px;
}
.grid-item {
background: cyan;
padding: 10px;
border: 1px solid #333;
}
</style>
<div class="grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
<div class="grid-item">C</div>
</div>
Output:
Result:
The items are placed in three columns: a fixed 100px column, a flexible column (1fr), and another fixed 100px column.
