CSS Box Model

I am just coming out of my first technical interview(it was a mock interview🤓). Everyone’s fear is they will be asked a question and completely draw a blank. Well, that happened to me and it was for a surprisingly easy question, what is a CSS box model? My mind raced thinking I use CSS all the time, but how do I not know what that is!? The truth was, during my Bootcamp, I relied on frameworks like Tailwind CSS and Bootstrap and did not take the time to learn fundamental CSS terms. So let’s learn together what a CSS box model is!

What is it?

The CSS box model is a set of rules that defines how every HTML element is rendered on a web page. The term box model is used when referring to the design and layout. According to the rules, all HTML elements can be thought of as boxes. So basically the idea is that there is a box that wraps around all HTML elements and consists of four different parts:

Want to read this story later? Save it in Journal.

• Content
• Padding
• Border
• Margin

Image from Coding Lead

This youtube video explains the CSS box model in terms of a house and its surroundings. This helped me a lot so follow below!

Content

Content is our house. This is where the content of the element lives (like text, an image, or nested elements). The width and height properties are applied to the content area by default.

Padding

Padding is the lawn or area between the house and fence. It is the transparent spacing between the element’s content and the element’s border. Think of padding as being able to give breathing room to your content. Values for padding are set with the padding property. These values increase the total width and height of your element in addition to the height and width set on the content area.

Border

The border is the fence. This is the divider around your element that is sometimes visible depending on your border properties set. The border is still a part of your element and the thickness of the border can be set using border-width. The border’s width adds to the width of the total element and separates the element from the rest of the web page.

Margin

Lastly, this is the empty space around your element used to separate it from its neighbors. Margin determines the space between your element and other elements around it. Something that is important to note is that margins collapse on each other which means when two boxes are touching each other the space between the two will equal the greater of the two margins.

Calculating the Width and Height of An Element

When you set the width and height properties to an HTML element, this is applied only to the content area. To calculate the full size of an element you need to include padding, borders, and margins. Let’s say we have a div element with the below properties.

div {
    width: 200px;
    height: 300px;
    padding: 10px;
    border: 15px solid black;
    margin: 5px;
}

You would calculate the div width like …

Total element width = content width + left padding + right padding + left border + right border + left margin + right margin

So total width = 200 + 10 + 10 + 15 + 15 + 5 + 5, which comes out to 260px. The total height of the div would be calculated like below…

Total element height = content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Calculating the total height and width is important when building the layout for your application. Keeping the box model in mind will help build a cleaner interface and save you time. Below are some helpful resources below if you want to learn more!

Introduction to the CSS basic box model

CSS Box Model