Tyrel Chambers

Back to blogs

What is the CSS Box Model?

February 27th, 2022

52

The CSS box model describes the area around every HTML element. When you add padding, margin or a border, you manipulate these properties.

A visual representation of the CSS box model can be found in the dev tools of most modern web browsers like Chrome and Firefox. It's a handy tool to see what properties are affecting the layout of your content.

Padding

Padding represents the area adjacent to your content. It is the area that wraps the content itself.

The red area represents the padding being applied to our content.

Border

The border is the next layer that sits on top of our padding area, but underneath our margin as show by the green line.

Margin

The last property in our CSS box model is the margin represented by the teal area. It adds space to the external area of an element whereas padding adds space to the internal space. The border can be though of the dividing line between the two.

Sometimes when you're just starting out, it can be hard to decide what property would be most appropriate to add spacing to an element or elements. Padding should be used when you want to separate a piece of content from it's parent. It'd be like adding layers of bubble wrap to your package to protect it during shipping.

Furthering that analogy, the box itself could be thought of as the border. The border can be any width, or not exist at all.

Margin would be used to separate our box from other boxes so it's applied to the area outside our content. It's used to separate an element from another element.

Tyrel Chambers

I'm a software engineer and indie developer living in Ontario, Canada. I love day-dreaming new ideas and using my free time to bring them to life.

If you enjoyed this article

You might enjoy one of these suggestions

Networking to get your first web-development job

Landing your first job usually involves sending hu...

Read post

How to avoid "hobby" burnout

Losing one's passion for their hobbies through bur...

Read post

Build a Reddit Scraper: Composing Messages

Today let's talk about composing and sending messa...

Read post