Goal: Implement the box model in our code.

  • The space around each element on our web page is described by the box model
  • The box model can add a margin, border and padding around web page content

Warm Up

  • What is the difference between margin and padding?
  • Why is box-sizing: border-box; useful?


Here are some exercises for you to practice using margins, borders, and padding. Don't forget to make commits and push to the project's remote repository on GitHub.

Band Webpage

  • For the sidebar to your band's webpage, add a border and a bit of padding and margin. Give the sidebar a background color, if you haven't already.
  • Add some padding around the images on your band's webpage.

Blogging Website

  • Between each entry on your blog project, add a bit of space. Use margin-top and margin-bottom so that you don't increase the spacing on the sides.

Interior Decorator Website

  • Give different background colors to each column of your interior decorator site.

Lesson 35 of 53
Last updated October 12, 2021