Streaming live at 10am (PST)

Best way to create space between buttons


I’m trying to understand what would be the best way to add spacing between two buttons.
The Webflow tutorial tells us to add a margin on the left and right side of the buttons, to create a breathing room.

Even though that works fine, I find it useable only when the whole buttons group is centered on the screen.
What I’m trying to do is find the best practice for creating the space between buttons.

An example image:

How would you add a spacing here? The button group should be aligned to the left side.
The only way I know is to create TWO separate classes (or a combo class) and apply a margin on only one of them. Is this the best way to do this or?

Sorry, I’m quite new to this game.

Thank you in advance.


Or you could just set a margin right on the class.

The best way is to create a button wrapper that will always house your button sets. This wrapper should have negative margins that would be equal to the margins around the buttons themselves.

1 Like

I was looking for a way to avoid this, as adding the margin on the class (for example, right margin) would add a margin to every button on the page, even the ones that are aligned to the right edge of the content.

That’s exactly what I was looking for. Thank you!

No problem. It is my goto technique when working with any repeatable content - buttons, columns etc.