The CSS Box Model – A Practical Guide

CSS can be a little confusing when you first start learning it. When I first started learning CSS I remember being so confused about many aspects of how it all worked together. That is until I studied and learned the CSS Box Model, which is the basic foundation of how HTML elements interact with all other elements on a web page through CSS styling.

It’s All Boxes

The first thing you need to understand about the CSS box model is that every HTML element rendered onto a webpage is represented as a rectangular box. CSS determines all of the styling properties of these elements(boxes) such as size, color, background-color, border styling, etc.

If you know the basics of CSS, you know you control these elements with properties, whether they are inline, internal, or on an external stylesheet. This is where you set the size and dimensions of each element.

The CSS Box Model basically consists of four areas. The content area, the padding area, the border area, and the margin area.

I created this infographic below as a visual representation to show how each area of the box model interacts with each other. Refer to this as you learn about each section.

The Content Area

The content area is the main area where the element is displayed, It is usually either text, sometimes with a background color, and or an image. The dimensions of the content box are set with the usual properties, the height, width, and the variations of those. By default, the box-sizing property is set to: content-box.

The Padding Area

The padding area is the next layer which is transparent. It controls the space between the content box and the border in all directions. You use the properties of padding-top, padding-right, padding-bottom, and padding-left to control the amount of space on each side. You can also use the shorthand padding property instead of each one individually. So for example:

• padding-top: 20px;
• padding-right: 40px;
• padding-bottom: 20px;
• padding-left: 40px;
• shorthand= padding: 20px 40px;

So using the code above would extend the area around the content box 20 pixels on the top and bottom, and 40 pixels on each the right and left each side. This effectively pushes the border away from the content element, and because the padding is transparent, it allows the background color to fill up the newly created space to the edge. Let me show you an example:

This is the content block without padding:

Now we add in 40px of padding to all sides:

The Border Area

The border area of the box model is the next layer the sets on the edges of the padding area. If you need a border around the element you just specify the property in your CSS and then you can see the actual border area. Compared to the other areas the border area is a little more self-explanatory. So for example, I will add a border property from the example above. Let’s add a 10px solid blue border:

The Margin Area

The margin area is the outermost layer of the box model, and like the padding area, it is also transparent. You control the margin area as you do with the padding area. You will use the margin-top, margin-right, margin-bottom, and margin-left properties, and of course the shorthand margin property if you prefer. Using these properties will create space between the edge of the border/padding area and the other elements of the page surrounding it. In my opinion, as a web developer, I think the margin area is particularly powerful and is used very often because it allows you to position your elements on the page where you need them.

Here is an example of adjusting the margin area, using the same example again. Let’s add a margin-top of 100px and watch how the margin pushes the box 100 pixels down the page.

Here is the element before we apply the margin-top:

Here we apply a margin-top of 100 pixels:

As you can see this is where the margin area can be powerful to use in your layouts. You can adjust your properties for each side and get the same type of movement, allowing you to place your element where you need it to be, and allows you to space your boxes evenly across your web layout.

When I was first learning CSS and trying to build my first layouts, I remember the challenge of trying to get all of my elements, or boxes, to line up and space out evenly the way I needed them. I spent a lot of time being frustrated while adjusting the CSS properties aimlessly for hours, only because I never took the time to learn and understand the box model. When I finally learned and practiced using it, especially the margin area, positioning elements started to come naturally and effortless.

Practice Using the CSS Box Model

One of the best ways of fully understanding the CSS Box Model is by putting it into practice in your own projects, and just experimenting with each area. You can also use a tool such as Codepen to practice using the box model. Codepen.io is an online code editor and lets you practice HTML, CSS, and even Javascript while letting you see the results of your code displayed immediately on the same screen. This is the tool I used to show the snippets in the examples above.

Another great way to practice is by using the developer tools, also called the inspector, in your Internet Browser. Google Chrome and Firefox both have great developer tools. If you have never used the inspector I will show you how to access and use them.

How to Use Developer Tools

Open your Internet browser, and go to any webpage. Right-click anywhere on the screen. When the menu opens up navigate down and choose: Inspect. If you are using Firefox it is labeled: Inspect Element.

This will open a panel usually either on the bottom or right side of your browser that looks like this:

From the Inspector panel, you can view and interact with every HTML element on the page, and also with the Styles panel, view the CSS properties that are attached to the specific element selected. Click on an HTML element on the left and then under the Styles tab in the right column it lists all CSS declarations for that element.

In the Styles panel, you can change and alter CSS properties and see how they affect that element on the page immediately. You can learn so much by experimenting with this panel. When you are trying to debug a problem on a website, this tool lets you inspect and test the code to see what works and what doesn’t. This is a web developer’s power tool for efficient troubleshooting and debugging issues on a website.

To understand the CSS box model, go to the Styles tab and scroll all the way to the bottom. You will see the box model layout that looks very similar to the model I provided at the beginning of this tutorial.

If you hover over each area of the box model area, you will see the correlating colors displayed on the screen on and around the element you have selected from the Inspector tab. This will show you exactly how each area is affecting that element’s layout on the page. This is a very useful tool to start understanding how the box model is used on every website.

Go to multiple websites and play around in the inspector. Don’t be afraid to change anything and test different CSS properties, once you refresh the page everything in the inspector will go back to the original code, so you can’t break anything. Specifically change the margin, border, and padding properties so you can see how the box model applies these changes. After some experimenting, you will start to understand the box model and be able to use it effectively in your own projects.

Conclusion

Learning web development is all about trial and error and experimenting until concepts start to click and make sense. I hope this tutorial clears up some of the confusion and gives you another skillset to use in your projects. Understanding the CSS box model is fundamental to becoming proficient with CSS.

If you enjoyed this content please share and spread the knowledge. If you have any questions or comments please leave them down below. Don’t forget to subscribe to the Level Up Dev email list. You will receive updates on new information such as tutorials and more about learning web development. Remember to be persistent and always strive to level up your skills.