site icon

Hi, I’m Chris

I am a web developer teaching
regular people how to code

~ Welcome to my blog ~

Understanding CSS Margin, Padding and the Box Model

We can use both margin and padding in our CSS to apply spacing to our elements.

If you are still not comfortable what these do exactly, then we are going to take a look in more detail, along with taking a look at the CSS box model, and why it is important to understand.

If we just added 2 div’s or sections to a webpage, and some text inside using the p element, we would end up with something which looked like this:

2 section web page

This is obviously not great to look at, and one of the first things we may do is to add some spacing.

To begin, we may want some spacing inside of the sections like this, so it is not close to the edges, and looks a little more readable:

And this is the effect of padding, it will add spacing to the inside of an element. Our nested content here is plain text, but it also applies to other content too.

padding added to a section

The padding is highlighted above by this green section. This is the effect of the padding rule in CSS, it will default to adding the padding around all 4 sides, we also have access to padding top, right, bottom, and left if we only want spacing on certain sides.

But, what if we also wanted space between the sections?

As we have just looked at, padding only applies to inside of the element, so, instead we apply margin:

css margin between sections

Margin adds spacing to the outside of the element, as we see with the orange section.

Just like padding, the margin rule will apply to all 4 sides, unless we tell it otherwise.

For this example, the first section would need to have margin-bottom applied. Or, we could also add margin-top to the second element, to do the same thing.

Adding spacing like this, does have an effect on the overall size of the element though, and this is called the CSS box model.

If we set a size of an element in the CSS, such as 300px for example, this is generally the size we want it to display in the browser:

section of text set to be 300px wide

But, let’s say we added 10px of padding to an element. As we know, padding is added to inside of the element, so this will add to the overall size:

padding showing increased overall element size to be 320px

The 10px on each side will increase the element width to now be 20px wider, resulting in the width increasing to be 320px.

We may also want to add a border too. Why is this important to consider? Well a border has a width too.

Adding a border in CSS will also have the same effect, if we add a 1px border all around like this:

border added to element

This will add 1px on each side, increasing the overall width to be 322px.

Meaning we need to be careful when sizing elements to allow for this, since our original 300px wide element, now displays at 322px.

But what about margin?

Since margin is added to the outside of the element, this is not accounted for in the overall size:

margin added to element with no effect

So, to account for this padding and border increasing the element size, we have 2 approaches.

We could either reduce the initial width of our content, so here, we could remove the extra 22px, and set the width to be 278px to account for this.

This is a solution, but not very efficient. It leaves us with more work to do, and also prone to human errors.

Or alternatively, we could get the browser to calculate it for us, by adding the css box-sizing rule:

div {
  box-sizing: border-box;
}

This means whatever we set our padding and border sizes to, the browser will always display our element at the original size we set, eg. 300px wide.

We do this by setting the CSS rule of box-sizing to be border-box. And this is something we can add to our CSS if we are having problems setting the size of an element.


- By Chris Dixon

Chris Dixon is a web developer and teacher. Teaching thousands of students mainly in Vue.js React.js, WordPress and web development.