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 I think I finally found some solid ground rules to answer these questions. CSS 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 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. design .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 . It will select only the element that is immediately preceded by the former element. + adjacent selector The green elements are matched by the (+) adjacent selector In our case, it will like shown in the picture above. So using the adjacent selector we can add a left margin to all cards except the first. select any card that is preceded by any other card 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 class because it just isn't a card. So what now? Should we create a class that has the same margin property as the class? No. There is a better way. .card .add-card .card 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 - also the button. any element that is preceded by any other element 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 for the above examples and these two rule of thumb I use: pen : Spacing between the container and its content. : Spacing between elements inside a container. Padding Margin ❤️ If you liked this post feel free to give it a and follow me for more experiences of my developer journey.
