The Box Model

Introduction

To do CSS correctly, you need to have a model in your head for how everything fits together on the page. Otherwise, you’re just randomly guessing and checking what works to move things around. The Box Model is that model. It defines how every element on the page gets placed and how they relate to each other.

You can’t be shaky on how it works if you want to be efficient with your work flow. So take the time to really nail down your mental model for how elements interact with each other on the page.

Learning Outcomes

  • What’s the difference between margin and padding?
  • How do borders affect the size of the box?
  • How can margins be used to center an element horizontally on the page?
  • What does it mean that “margins are collapsed”?
  • What is the difference between block, inline-block and inline elements when thinking about the box model?
  • When are you required to specify the width of an element vs letting the browser figure it out for you?
  • How do box shadows affect element box sizing?
  • How can you check an element’s box model in your developer tools (it’s a helpful graphic)?

Assignment

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

HTML5 and CSS3

The Box Model

View Course Login to track progress Next Lesson

Got questions?

Chat with our friendly Odin community in our Gitter chatrooms!

Open Gitter

Are you interested in accelerating your web development learning experience?

Get started

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship