Skip to main content
Version: WIP

✏️ 1.1.3.8 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?

AI Support: Unsure about margin vs padding? After trying the warm-up questions, you can ask AI to explain the box model in plain language. Do not ask AI to build your practice projects for you.

Example prompts:

  • Weak: "Make my CSS spacing work."
  • Strong: "I added padding but the element still looks cramped against its neighbor. Can you explain the difference between margin and padding—without writing the CSS fix for me?"

Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "Can you explain when I'd use margin-top vs padding-top to add space between two elements—without writing CSS for me?"

After reading AI's response, explain the concept back in your own words before moving on.

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.

Checkpoint​

Before moving on, you should be able to:

  • Add margin, border, and padding to an element
  • Explain the difference between margin and padding
  • Use box-sizing: border-box when sizing elements with padding or borders

If you're unsure, re-read the Box Model lesson or ask AI: "Can you explain the difference between margin and padding with a simple analogy—without writing CSS for me?"