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
- 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. 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.
- 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.
- Between each entry on your blog project, add a bit of space. Use
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.