🎯 Learning Objectives

By the end of this lesson, students will understand:

The CSS box model (most important concept!)
Margin vs Padding
Block vs Inline elements
Changing display property

1️⃣The Box Model (MOST IMPORTANT)

Every element is treated as a box with:

+-------------------------+
|       Margin            |
|  +-------------------+  |
|  |     Border        |  |
|  | +---------------+ |  |
|  | |   Padding     | |  |
|  | | +-----------+ | |  |
|  | | |  Content  | | |  |
|  | | +-----------+ | |  |
|  | +---------------+ |  |
|  +-------------------+  |
+-------------------------+

Properties:

Property	Meaning
`margin`	Space outside element
`padding`	Space inside element
`border`	Line around element
`width / height`	Size of content box

Example:

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
}

2️⃣Margin vs Padding (Simple Example)

.card {
  background: lightblue;
  padding: 20px;   /* inside */
  margin: 30px;    /* outside */
}

3️⃣ Block & Inline Elements

Block Elements

Take full width
Start on a new line

Examples: div, p, h1, section, table