How to space buttons properly (or anything else really)
I often see people struggling to properly add space between buttons in a group of buttons (that will work well in responsive too). So here is the best (and easiest) way to space inline elements (like buttons) with no undesired side effects :
$spacing: 20px;
.container {
margin: $spacing * -0.5;
> button {
margin: $spacing * 0.5;
}
}
(This exemple is in SCSS)
Here is the result :
As you can see, there will always be a 20px
space between buttons, no matter how the page gets resized (because buttons have a margin all around them). And the container prevent those margins to spill outside using a negative margin.