ブートストラップ4リンク間のマージンを取り除くにはどうしたらいいですか？

Question

私はブートストラップ4のインラインブロックリンクを実装しています。それらの間に目に見えないマージンがあるように見えますが、削除できないようです。

スクリーンショット：

Codepen here。

コード：

<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 1

をリンク間、HTMLに改行であることが判明。私はそれが意図的なものなのか、何らかのブラウザバグなのかどうかはわかりません。とにかく..改行を削除する：

<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

は、ボタンの新しいクラスを追加し、

margin: 0 -4px 0 0; 

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

Answer 3

を使用するボタンは「インライン・ブロック」として表示されるためだこと。

余白ではなく、スペースの間にスペースがあります。あなたは、各タグの間のスペース/改行を削除することによってそれを修正することができます：

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

Answer 4

あなたは最終的に行うために探しているものに応じてブートストラップボタングループを使用することができます。

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

Docs

実施例を参照してください：問題

/*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>