CSS Display Properties - Complete Guide

1. display: block

What it does: Takes full width available and starts on a new line. Like a paragraph or heading. 
display: block;
Block Element 1
Block Element 2
Block Element 3

2. display: inline

What it does: Elements sit side by side like words in a sentence. Cannot set width/height. 
display: inline;
Inline 1
Inline 2
Inline 3

3. display: inline-block

What it does: Like inline but you CAN set width and height. Best of both worlds! 
display: inline-block;
Inline-Block 1
Inline-Block 2
Inline-Block 3

4. display: flex

What it does: Modern way to arrange items in a row or column. Super flexible! 
display: flex;
Flex Item 1
Flex Item 2
Flex Item 3

5. display: grid

What it does: Creates a grid layout with rows and columns. Perfect for complex layouts! 
display: grid;
grid-template-columns: repeat(2, 1fr);
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4

6. display: table

What it does: Makes elements behave like HTML tables. Old-school but still useful! 
display: table; / table-row / table-cell;
Cell 1
Cell 2
Cell 3
Cell 4

7. display: none

What it does: Completely hides the element. It's like it doesn't exist at all! 
display: none;
Visible Element
Hidden Element
Another Visible Element

↑ Notice the middle element is completely gone!

8. visibility: hidden (Bonus!)

What it does: Hides element but keeps its space. Different from display: none! 
visibility: hidden;
Visible Element
Hidden Element
Another Visible Element

↑ Notice the space is still there!

🎮 Interactive Demo - Try Different Display Values!

Interactive Box 1
Interactive Box 2
Interactive Box 3

📝 Quick Summary

block = Full width, new line (like div, p, h1)

inline = Side by side, no width/height (like span, a, em)

inline-block = Side by side + width/height (like button, img)

flex = Modern flexible layout (great for navigation, cards)

grid = Grid system (perfect for complex layouts)

none = Completely hidden