What’s The Difference Between Padding And Margin?
Tags: webdev, css, beginners
Published: 2021-04-26 21:30:32

---
title: What’s The Difference Between Padding And Margin?
published: true
date: 2021-04-07 15:19:12 UTC
tags: Webdev, css, beginner
canonical_url: https://kevq.uk/whats-the-difference-between-padding-and-margin/
---

The difference between padding and margin is a bit of a quandary for CSS newcomers. This post explains the difference between them.

If you’re into web design, [like me](https://kev.uk/category/web), then you will have likely wanted to increase or decrease the spacing between elements on a page. But should you use `padding` or `margin`? Actually, what’s the difference between them?

I’ve had this post in my list of drafts for some time now, because I struggled with this too when I first started out. Someone asked this very question on [Fosstodon](https://fosstodon.org) recently, so I thought it was a good time to finally write this post.

## The difference between padding and margin

To best explain the differences between padding and margin, I’m going to use a fake navigation menu. I’m using a nav menu as they tent to need both padding and margin, especially if you want to make the menu items look like buttons.

So here’s what the menu looks like by default. Not much of an actual menu, but rather an ugly string of text instead, right? That’s where our padding and margin comes in.

![Menu with no padding or margin](https://kevq.uk/wp-content/uploads/2021/04/no-padding-no-margin.png)

### What is padding?

To demonstrate padding, let’s start by adding a red dotted border around each menu item, and a yellow background:

![Menu with no padding or margin, but with a background](https://kevq.uk/wp-content/uploads/2021/04/no-padding-no-margin-with-bg.png)

Next we’re going to add some padding to each menu item. If we look at each item, padding would be the space **inside** the red dotted border. So by adding padding, we’re basically making the inside of the box bigger.

Because padding is applied inside the box and the box has a yellow background, the addition of padding makes the yellow background larger. Here’s what our menu looks like with some padding added:

![Menu with padding added](https://kevq.uk/wp-content/uploads/2021/04/with-padding.png)

### What is margin?

We’ve added padding and our yellow boxes have increase in size, but the space between our boxes is still tiny and it looks weird. That’s where margin comes in.

So if padding is the space **inside** our box, margin is the space **outside** of it. Our menu items look a bit like buttons now, so let’s add some margin to increase the spacing between each of the “buttons”:

![](https://kevq.uk/wp-content/uploads/2021/04/with-margin.png)

Now that we’ve added both padding and margins, things look a lot more like a traditional navigation menu. It’s a really ugly menu, but it’s looks like a menu nonetheless.

## Where can padding and margins be applied?

Both padding and margin can be added to the top, bottom, left and right of an element and they can be expressed using a number of units of measure. Some people like `px`, others like `em`. I personally like `rem` as it’s a dynamic measurement that is based off of the font in use. Here’s some examples of margin and padding in use:

```
nav a {
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

nav a {
  margin-right: 1rem;
}
```

Take a look at the `padding` in CSS above. Four lines of CSS to add padding to all 4 sides of an element is pretty inefficient, right? Lucky for us there’s a short hand way of doing it, like this:

```
nav a {
  padding: 1rem .5rem;
}
```

This snippet of shorthand CSS tells your browser to apply `1rem` of padding to the top **and** bottom of the element, as well as `.5rem` of padding on the left **and** right. If you want to use a single line, but set different padding on every side, you can do so like this:

```
nav a {
  padding: 1rem .5rem 0 2rem;
}
```

The padding declarations start at the top side of the element and work their way around clockwise. So the code above is adding `1rem` to the top, `.5rem` on the right, nothing on the bottom and `2rem` on the left. You can use the same methods with margin too.

## Putting it into practice

If you want to have a play around with padding and margin on my fake navigation menu, feel free to play around with a CodePen I created. You can [edit it here](https://codepen.io/kevquirk/pen/eYgGgzL).

## Conclusion

Hopefully this post has helped you to not only identify the differences between padding and margin, but also given you some practical tips on how to implement it into your own CSS stylesheets.

**If you did find this post useful, please do [let me know](https://kevq.uk/contact/) and I’ll start doing more little snippets like this.**

If you want to see more content like this, give me a nudge [on Twitter](https://twitter.com/kevquirk).