Margin or padding?

19,520 reads

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.

Tags