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.