Skip to main content

✏️ Practice: Box Model

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?

Code​

Here are some exercises for you to practice using margins, borders, and padding. Meet the goal by completing one of these projects. 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.
  • Add padding or a border to each column.