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. 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.