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-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)?

Study

  1. 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

  1. Continue by watching this extended tutorial on the Box Model by Colt Steele:

Duration: 42 minutes

  1. Read The CSS Box Model from CSS-Tricks

  2. 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.

  3. 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, and margin determine 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

Description

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

Description

Description

CNN

Description

Description

The White House

Description

Description

Student Submitted Examples

Additional Resources

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?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 14.05.2021

CONTRIBUTORS: