11. The box model

Unlock this lesson

Create a free account, then buy the course to open every lesson.

What you will learn in this lesson

  • See every element as a box with four layers.
  • Add space inside a box with padding.
  • Draw a line around a box with border.
  • Add space outside a box with margin.
  • Set a width that stays the real width with box-sizing.

55 minutes Lesson 11 of 30

Everything in Web Foundations

  • 30 step-by-step lessons
  • 3 mini projects with solutions
  • A final project for your portfolio
  • Real commands and real output in every lesson
  • Practice task with a solution in each lesson
  • Progress saved to your account