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.

Menu