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.
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:
Learning Objectives
- 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)?
Study
- 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
content,padding,border, andmargindetermine 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
Coding Interview
Here’s a question that might be asked during an interview for a Frontend job:
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.
Real Life Examples
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.
Al Jazeera
CNN
The White House
Student Submitted Examples
Additional Resources
CSS Box Model from Shaye Howe (gets into floats and positioning a bit too)
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.
UPDATED: 14.05.2021
[23.01.2021] Added resources for inline and inline-block elements
Added
The box model for beginners web design tutorialvideo by WebflowAdded How whitespace is handled by HTML, CSS, and in the DOM
Added real-life examples of centered block elements using margin auto
CONTRIBUTORS: