Bulma: No margin between buttons

[serby]

Checklist

• [X] This is about the Bulma CSS framework
• [ ] This is about the Bulma Docs
• [X] I'm using Bulma version [x.x.x]
• [X] My browser is: Chrome 53
• [X] I am sure this issue is not a duplicate?
  

  Description

Buttons rely on newlines for gap. Compressing the HTML removes all space between buttons.

Steps to Reproduce

<div class="column">
  <a class="button is-outlined">Outlined</a>
  <a class="button is-primary is-outlined">Outlined</a>
  <a class="button is-info is-outlined">Outlined</a>
  <a class="button is-success is-outlined">Outlined</a>
  <a class="button is-danger is-outlined">Outlined</a>
</div>

Produces this:

Remove the newlines:

<div class="column"><a class="button is-outlined">Outlined</a><a class="button is-primary is-outlined">Outlined</a><a class="button is-info is-outlined">Outlined</a><a class="button is-success is-outlined">Outlined</a><a class="button is-danger is-outlined">Outlined</a></div>

Expected behavior

There should be some margin between buttons.

Actual behavior

No margin

[jgthms]

Yes it's the normal behaviour, as buttons are inline-flex or inline-block. This allows to specify an exact margin.

If you want regular spacing, you can use a button group.

[serby]

Thanks, I can see that is-grouped is the correct usage now.

Is there any possibility of having it so that buttons margins' aren't mutated based on newlines to prevent idiots like me question the behaviour of button margins.

[jgthms]

That's unfortunately the default behaviour of browsers.

[serby]

Thanks, I can see why this must be like this now. Great project BTW! Really enjoying using it.

[claide]

2019

Need to wrap the buttons inside a div with a class buttons

<div class="buttons">
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
</div>