🟢 LESSON 4 PRACTICAL — Display & Layout

🎯 Goal

Understand:

• Why elements stack or stay inline
• Control layout using display
• Prepare for Flexbox (next lesson 🔥🔥)

CORE IDEA

Every HTML element has a default display type:

1. Block elements

• Take full width
• Start on new line

Examples:

• <div>, <h1>, <p>

2. Inline elements

• Stay on same line
• Only take needed width

Examples:

• <span>, <a>

🧑‍💻 STEP 1: Test Display Types

Add this to your HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

🎨 STEP 2: Style Them

.box {
    background: white;
    padding: 20px;
    margin: 10px;
    border: 2px solid black;
}

.box {
    background: white;
    padding: 20px;
    margin: 10px;
    border: 2px solid black;
}

👉 You’ll see:

• Boxes stacked vertically (block behavior)

🔄 STEP 3: Change to INLINE

.box {
    display: inline;
}

.box {
    display: inline;
}

👉 Result:

• They go in one line
• BUT width/height won’t work properly ⚠️

⚡ STEP 4: Use INLINE-BLOCK (IMPORTANT 🔥)

.box {
    display: inline-block;
    width: 150px;
}

.box {
    display: inline-block;
    width: 150px;
}

👉 Now:

• Same line ✅
• Width works ✅

🚫 STEP 5: Hide Elements

.box {
    display: none;
}

.box {
    display: none;
}

🧪 STEP 6: Real Practice

Modify your cards:

.card {
    display: inline-block;
    width: 300px;
    margin: 20px;
}

.card {
    display: inline-block;
    width: 300px;
    margin: 20px;
}

👉 Now cards sit side by side

🎯 CHALLENGE

Create a layout like this:

[ Card ]   [ Card ]   [ Card ]

👉 Requirements:

• 3 cards in one row
• Equal width
• Spacing between them

💡 PRO INSIGHT

👉 BUT…

⚠️ Real developers don’t rely on this much anymore…