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-blockandinlineelements 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.
Last updated