📦 CSS Lesson 5 - The Box Model

Master Margin, Border, Padding and Content.

What is the Box Model?

Every HTML element is treated like a box. The box has four parts:

Example

.box{

width:300px;

padding:20px;

border:3px solid blue;

margin:30px;

}

💻 Try It Yourself

Create a box that has:

🚀 Open Playground

Visual Example

Property Purpose
Content The actual text or image.
Padding Space inside the border.
Border Line around the element.
Margin Space outside the element.
âš  Pro Tip: Most layout problems happen because of incorrect margin or padding. Learn them well.

🧠 Quiz

Which property creates space outside an element?

⬅ Previous Next Lesson ➜