Margin or padding?

Some thoughts on when to use which

“When should I use margin? When should I use padding? Does it even matter?”

I have been struggling with these question for way too long. After writing tons of unmaintainable and side-effect heavy CSS I think I finally found some solid ground rules to answer these questions.

Let’s consider a typical example that probably every one of us who is building UI in 2017 has come across: Cards.

In this example we can identify two different kinds of spaces:

• the space between cards (blue)
• the space between the cards and the container (green)

It is important to understand that these are two different concerns. Their styling should be decoupled so that I can change the space between the cards and their container to 24px without having side-effects on the space between the cards.

So how can we implement this example using CSS?

There are literally a thousand ways to implement this design with margin and padding, but I will show you one that makes proper use of padding and margin and will allow us to add more cards later on.

.container {padding: 16px;}

.card + .card {margin: 0 0 0 8px;}

And that’s it. 2 selectors. 2 rules.

But, what does the + do? 🤔

The + is a CSS selector called adjacent selector. It will select only the element that is immediately preceded by the former element.

The green elements are matched by the adjacent selector (+)

In our case, it will select any card that is preceded by any other card like shown in the picture above. So using the adjacent selector we can add a left margin to all cards except the first.

This means we can add as many cards as we want and they will always have a spacing of 8px between them 🎉

Now imagine we would add something next to the cards that is not a card, like an “Add card” button:

If we look at our CSS we would probably not give the button the .card class because it just isn't a card. So what now? Should we create a .add-card class that has the same margin property as the .card class? No. There is a better way.

The lobotomised owl * + *

Although this pattern sounds really funny, it is actually very useful and I've been using it all the time since I learned it. Here is how it looks in our CSS:

.container {padding: 16px;}

/* can you see the lobotomised owl? 😜 */.container > * + * {margin: 0 0 0 8px;}

As you remember previously this selector would select any card that is preceded by any other card. Now the selector selects any element that is preceded by any other element - also the button.

The green elements are matched by the adjacent selector (+)

Conclusion

I hope this gives you a better idea of when to use margin and padding to space out content in a container.

To sum up I am going to leave you with the pen for the above examples and these two rule of thumb I use:

Padding: Spacing between the container and its content.Margin: Spacing between elements inside a container.

If you liked this post feel free to give it a ❤️ and follow me for more experiences of my developer journey.