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.
Since this is one of the most important concepts in CSS, 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.
Watch this 2 minute introduction to the Box Model by the nice folks at Webflow:
- 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
inlineelements 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)?
- Start by watching this short but very informative and concise video on the CSS Box Model, then move on to reading the next material that goes into more detail. Try to pause the video or reading and practice the concepts presented in your code editor.
Duration: 8 minutes
- Continue by watching this extended tutorial on the Box Model by Colt Steele:
Duration: 42 minutes
Take a short break, grab a cup of coffee and study the How whitespace is handled by HTML, CSS, and in the DOM post by MDN which describes in detail how whitespace is handled by the browser. The concepts mentioned in this post are some of outmost importance so pay close attention to them and make sure you keep notes and test them on your code.
Read this article about Understanding the CSS box model for inline elements and make sure to use the Developer Tools to inspect your own inline elements and understand their properties and behavior on the page.
Here’s a nice and short description to keep in mind about how HTML elements are displayed on a web page:
In a web page, every element is rendered as a rectangular box. The box model describes how the element’s
margindetermine the space occupied by the element and its relation to other elements in the page. Depending on the element’s display property, its box may be one of two types: a block box or an inline box. By Patrick Brosset
What is the difference between an element with a display value of inline vs inline-block?
Can you answer this question? If you don’t feel confident enough about your answer, then dive into this article and make sure that you create experiment with these two display property values to get a good understanding of their differences.
Here are some real-life examples of websites that use the auto value of the margin-left and margin-right CSS properties on block elements to center their main content.
The White House
Student Submitted Examples
Watch this next live session recorded on 14.01.2021 at SHA, that walks you through the basics of block and inline elements, the Box Model and its 4 layers (content/padding/border/margin) as well as the hybrid inline-block elements and its special properties.
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?
[23.01.2021] Added resources for inline and inline-block elements
The box model for beginners web design tutorialvideo by Webflow
Added real-life examples of centered block elements using margin auto