How to remove these margins between my Bootstrap 4 links?

Question

I'm implementing Bootstrap 4 inline-block links and they seem to have an invisible margin between them, which I can't seem to remove.

Screenshot:

Codepen here.

Code:

<div>
    <!-- There shoud be NO MARGIN between the links -->
    <a href="#" class="btn btn-danger">
        Button A</a>
    <a href="#" class="btn btn-secondary like-button">
        Button B
    </a>
</div>

How do I get rid of these invisible margins?

Answer 1

The problem turned out to be the line break in the HTML, between the links. I'm not sure if it's intentional or some kind of browser bug. Anyways.. Removing the line break works:

<div>
    <!-- There shoud be NO MARGIN between the links -->
    <a href="#" class="btn btn-danger">
        Button A</a><a href="#" class="btn btn-secondary like-button">
        Button B
    </a>
</div>

Answer 2

Add a new class for the button and use

margin: 0 -4px 0 0;

codepen https://codepen.io/norcaljohnny/pen/BQqroO

Answer 3

That's because the buttons are displayed as "inline-block".

There's a space between them, not a margin. You can fix it by removing the space/line break between each tag:

<button>first</button></button>second</button>

Answer 4

You could use a Bootstrap Button Group depending on what you're ultimately looking to do.

<div class="btn-group" role="group" aria-label="Basic example">
   ...you buttons
</div>

See Docs

Working Example:

/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/

body {
  padding-top: 50px;
  text-align: center;
}
/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic example">
  <a href="#" class="btn btn-danger">Button A</a>
  <a href="#" class="btn btn-secondary like-button">Button B</a>
</div>