CSS Display
31 March 2025 | Category: CSS
The display property in CSS controls how an element is displayed on the webpage. It is one of the most important CSS properties because it determines the layout and behavior of elements.
1️⃣ Types of display Values in CSS
Here are the most common display values:
display Value | Description |
|---|---|
block | Elements take up full width, start on a new line. |
inline | Elements take only as much space as needed, staying in the same line. |
inline-block | Similar to inline, but allows setting width and height. |
none | Hides the element (it doesn’t take up space). |
flex | Used for flexible box layouts. |
grid | Used for grid layouts. |
table | Makes an element behave like a table. |
2️⃣ block Display
Block-level elements always start on a new line and take up the full width available.
Example
<div style="display: block; background-color: lightblue; padding: 10px;">
I am a block element
</div>
<p>I also take full width.</p>
📌 Common block elements: <div>, <p>, <h1> to <h6>, <section>, <article>, <form>
3️⃣ inline Display
Inline elements only take up as much space as necessary and stay on the same line.
Example
<span style="display: inline; background-color: yellow;">
I am an inline element.
</span>
<span>I stay on the same line.</span>
📌 Common inline elements: <span>, <a>, <b>, <i>, <strong>
4️⃣ inline-block Display
inline-block behaves like inline, but width and height can be set.
Example
<span style="display: inline-block; width: 150px; height: 50px; background-color: lightgreen;">
Inline-Block Element
</span>
<span>I'm still inline.</span>
✅ Differences Between inline & inline-block
| Property | inline | inline-block |
|---|---|---|
| Width & Height | ❌ Cannot be set | ✅ Can be set |
| New Line | ❌ Stays on the same line | ❌ Stays on the same line |
5️⃣ none Display
Hides an element completely (it does not take up space).
Example
<p style="display: none;">This paragraph is hidden.</p>
📌 Use case: Show/hide elements dynamically using JavaScript.
document.getElementById("myDiv").style.display = "none";
6️⃣ flex Display (Flexible Box)
Used for modern, responsive layouts. It makes elements flexible and easy to align.
Example
<div style="display: flex; justify-content: space-around;">
<div style="background: lightblue; padding: 20px;">Box 1</div>
<div style="background: lightcoral; padding: 20px;">Box 2</div>
<div style="background: lightgreen; padding: 20px;">Box 3</div>
</div>
✅ Flexbox allows:
✔️ Horizontal & vertical alignment
✔️ Equal spacing
✔️ Responsive design
7️⃣ grid Display
The grid display is used to create two-dimensional layouts (rows & columns).
Example
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
<div style="background: lightblue; padding: 20px;">Grid Item 1</div>
<div style="background: lightcoral; padding: 20px;">Grid Item 2</div>
<div style="background: lightgreen; padding: 20px;">Grid Item 3</div>
</div>
✅ Grid Layout Advantages:
✔️ Rows & columns
✔️ Full control over layout
8️⃣ table Display
Allows an element to behave like a table.
Example
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; padding: 10px; border: 1px solid black;">Row 1, Cell 1</div>
<div style="display: table-cell; padding: 10px; border: 1px solid black;">Row 1, Cell 2</div>
</div>
</div>
9️⃣ Changing Display with JavaScript
You can dynamically change the display property using JavaScript.
Example
<button onclick="hideElement()">Hide</button>
<button onclick="showElement()">Show</button>
<div id="myBox" style="background-color: lightcoral; padding: 20px;">
This box will be hidden or shown.
</div>
<script>
function hideElement() {
document.getElementById("myBox").style.display = "none";
}
function showElement() {
document.getElementById("myBox").style.display = "block";
}
</script>
🔟 Full Example: Different Display Types
<!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>
.box {
padding: 10px;
border: 2px solid black;
margin: 10px;
}
.block { display: block; background-color: lightblue; }
.inline { display: inline; background-color: lightgreen; }
.inline-block { display: inline-block; background-color: lightcoral; width: 100px; height: 50px; }
.none { display: none; background-color: lightgray; }
.flex-container { display: flex; gap: 10px; }
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
</style>
</head>
<body>
<h2>CSS Display Property Examples</h2>
<div class="box block">Block Element</div>
<span class="box inline">Inline Element</span>
<div class="box inline-block">Inline-Block Element</div>
<button onclick="document.getElementById('hiddenBox').style.display='block'">Show Hidden Box</button>
<div id="hiddenBox" class="box none">This was hidden!</div>
<h3>Flexbox Example</h3>
<div class="flex-container">
<div class="box">Flex Item 1</div>
<div class="box">Flex Item 2</div>
<div class="box">Flex Item 3</div>
</div>
<h3>Grid Example</h3>
<div class="grid-container">
<div class="box">Grid Item 1</div>
<div class="box">Grid Item 2</div>
</div>
</body>
</html>
✅ This example includes:
✔️ Block, Inline, Inline-Block
✔️ Hide/Show with display: none
✔️ Flexbox & Grid
🚀 Summary Table
display Type | Behavior |
|---|---|
block | Takes full width, starts on a new line |
inline | Stays in line, width/height not adjustable |
inline-block | Stays in line, but width/height can be set |
none | Hides the element completely |
flex | Creates flexible layouts |
grid | Creates grid-based layouts |
table | Behaves like a table |
🎯 Conclusion
displayis essential for layout & styling.- Use
blockfor sections,inlinefor text elements. - Use
flexorgridfor modern layouts. display: nonecan hide elements dynamically.