Metadata
- Date :: 19-04-2025
- Tags :: web-dev
Notes
🌟 Let’s Learn About CSS Display Property
👋 What is CSS Again?
CSS stands for Cascading Style Sheets — it’s like dressing up your website to make it look pretty 💅🏽💻.
So far, we learned how to:
-
Color things 🎨
-
Move them around 🕺
-
Put boxes on top of each other 📦
Now we’re going to learn how to arrange those boxes properly using something called the Display Property!
🧊 What is the Display Property?
Think of it like this: every HTML element (like paragraphs, divs, images, etc.) is a box.
And the display property tells each box how it behaves — whether it’s greedy, polite, shy, or flexible.
🎭 The 4 Main Types of Display
Let’s meet the 4 display types like they’re characters in a story!
1. Block (The Greedy One 😈)
-
Takes up the entire row (the full width of the screen)
-
Doesn’t like to share space with anyone else
-
Pushes the next box to the next line
📦 Example: A <p> (paragraph) or <div> is block by default
🧪 What happens if you have two block elements?
<p>Hello</p>
<p>World</p>🔍 They will appear one below the other like:
Hello
World
🧠 Block boxes can have width and height set easily!
2. Inline (The Shy One 🤏)
-
Only takes up as much space as needed
-
Shares space with others on the same line
-
Cannot set its width or height – it sizes itself based on its content!
📦 Example: A <span> or <a> tag is inline by default
<p>Hello <span>beautiful</span> world</p>🧠 span is great for coloring or styling just part of the text.
3. Inline-Block (The Best of Both Worlds 😎)
-
Stays on the same line like inline
-
But you can still set width and height like block
🎯 This one is super useful when you want little blocks next to each other but still want to control their size.
🧱 Imagine lining up LEGO blocks next to each other — that’s inline-block!
4. None (The Invisible One 🫥)
-
Hides the element completely
-
It’s like telling your toy: “Shhh, hide under the bed!”
-
It won’t show up on screen and won’t take any space
Use it when:
-
You want to hide something like a secret message 🔐
-
Make a task disappear when it’s done in a to-do list ✅
🏗️ Let’s Try Them with Examples!
Imagine we have 3 boxes — red, green, and blue — all with width: 200px and height: 200px.
You want to arrange them side by side like this:
🟥 🟩 🟦
To do that, you’d use:
display: inline-block;✅ This lets them:
-
Appear next to each other
-
Keep their shape and size
🧪 Experiment Time!
There’s a cool practice website:
🔗 https://appbrewery.github.io/css-display
It shows you how each display type behaves. Try changing the width and height to see what happens!
🧠 Here’s What Happens When You Change Display:
| Display Type | Takes Full Width? | Can Sit Next to Others? | Can Set Width/Height? |
|---|---|---|---|
block | ✅ Yes | ❌ No | ✅ Yes |
inline | ❌ No | ✅ Yes | ❌ No |
inline-block | ❌ No | ✅ Yes | ✅ Yes |
none | ❌ (It’s hidden!) | ❌ (It’s hidden!) | ❌ (It’s hidden!) |
🧩 Challenge Time!
You’re given 3 boxes (paragraphs) with width and height set to 200px.
You need to:
-
Make them line up horizontally
-
Make them line up vertically
🎯 Solution 1: Horizontal Layout
To make the boxes line up side by side:
p {
display: inline-block;
}✨ Now the boxes will appear on the same line (if there’s enough space on screen!)
🎯 Solution 2: Vertical Layout
To make the boxes stack up like a tower:
p {
display: block;
}🧱 Now the boxes each take their own row and stack on top of each other.
🤓 Recap - What Did We Learn?
| Concept | Think of it like… | What it does |
|---|---|---|
block | Big greedy box 📦 | Takes the whole line |
inline | Little text hug 🤗 | Sits inside text, only as big as it needs to be |
inline-block | LEGO brick 🧱 | Can sit with others & have its own shape |
none | Ninja mode 🥷 | Completely hidden |