🟢 LESSON 3 PRACTICAL — Box Model (Spacing Like a Pro)

🎯 Goal

You will understand:

• margin (outside space)
• padding (inside space)
• border
• How to control layout cleanly

FIRST: Understand This (CRITICAL)

Every element is a box:

[ margin ]
[ border ]
[ padding ]
[ content ]

👉 Most beginners mess up here — this is why layouts look bad.

🧑‍💻 STEP 1: Update Your CSS

Modify your .card:

.card {
    background: white;
    width: 320px;

    padding: 30px; /* inside space */
    margin: 100px auto; /* outside space */

    border: 3px solid #4facfe;

    border-radius: 10px;
    text-align: center;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.card {
    background: white;
    width: 320px;

    padding: 30px; /* inside space */
    margin: 100px auto; /* outside space */

    border: 3px solid #4facfe;

    border-radius: 10px;
    text-align: center;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

🔍 STEP 2: See the Difference

Try changing:

1. Padding

padding: 50px;

padding: 50px;

👉 Content moves away from border

Margin

margin: 200px auto;

margin: 200px auto;

👉 Card moves away from screen edges

3. Border

border: 5px dashed red;

border: 5px dashed red;

👉 You visually see the box clearly

🧪 STEP 3: Add More Elements

Update your HTML:

<div class="card">
    <h1>Welcome to CSS</h1>
    <p>This is my first styled card.</p>
    <button>Learn More</button>
</div>

<div class="card">
    <h1>Second Card</h1>
    <p>Practicing spacing is important!</p>
    <button>Click Me</button>
</div>

<div class="card">
    <h1>Welcome to CSS</h1>
    <p>This is my first styled card.</p>
    <button>Learn More</button>
</div>

<div class="card">
    <h1>Second Card</h1>
    <p>Practicing spacing is important!</p>
    <button>Click Me</button>
</div>

🎯 STEP 4: Add Space Between Cards

.card {
    margin: 50px auto;
}

.card {
    margin: 50px auto;
}

👉 Now cards don’t stick together

🔥 STEP 5: Pro Trick (VERY IMPORTANT)

Add this at the top of your CSS:

* {
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

👉 This makes sizing predictable like a pro

🎯 CHALLENGE (DO THIS)

Make your design better:

1. Add space between:
   • Title and paragraph
   • Paragraph and button

👉 Hint:

h1 {
    margin-bottom: 10px;
}

p {
    margin-bottom: 20px;
}

h1 {
    margin-bottom: 10px;
}

p {
    margin-bottom: 20px;
}

💡 REAL DEV INSIGHT

• padding = comfort inside 📦
• margin = space outside 📏
• border = visual boundary 🔲

👉 Master this = clean UI always