Week 5 · 45-60 min
The CSS Box Model and Layout
Week Summary
A quick preview of the main ideas in this week before you begin the slides.
- What Is the Box Model?
- Content, Padding, Border, Margin
- Setting Width and Height
- Working with Borders
Glossary
Review these key terms before starting this week. They are kept simple so students can learn the new vocabulary before moving into the slides.
- What Is the Box Model?
- What Is the Box Model?
- Content, Padding, Border, Margin
- Content, Padding, Border, Margin
- Setting Width and Height
- Setting Width and Height
What Is the Box Model?
Progress
1 / 8
Understand how spacing and sizing work in CSS.
Read one card at a time. Focus on the main idea first, then look at the visual on the right to help it stick.
Every HTML element is treated as a box.
The box model includes content, padding, border, and margin.
It explains much of how spacing works in CSS.
It is foundational to page layout.
Spacing confusion often comes from misunderstanding the box model.
Remember
Understanding the box model makes CSS spacing much easier to reason about.
What Is the Box Model?
Slide 1 of 8
Use arrows or dots to move through the lesson
Practice
- Write 2-3 sentences about what you learned this week.
Coming Next Week: Next: CSS Flexbox