ボタンの奇妙なマージン

Question

私は理解できないボタンの間にこの奇妙なマージンを観察しています。スクリーンショットを見る

これはChromeのインスペクタで行われます。すべてのボタンは同じです。ご覧のとおり、それぞれには右下の余白がありますが、余白はありません。なぜ私はを理解できないのですか？ボタン2とボタン3の余白の間にギャップがある理由。

ChromeとSafariでテスト済みです。ここで

は、HTMLコードは、（改ページボタンがtableのtfootにある）です。

<table> 
    <thead>...</thead> 
    <tfoot> 
    <tr> 
     <td colspan="7"> 
     <button class="small">&#60;</button> 
     <button class="primary small">1</button> 
     <button class="small">2</button> 
     <button class="small">3</button> 
     <button class="small">4</button> 
     <button class="small">&#62;</button> 
     </td> 
    </tr> 
    </tfoot> 
    <tbody>...</tbody> 
</table> 

Answer 1

これは、単一のスペースとして扱われるボタン要素間の空白です。

<button></button><button></button> 

またはそれらの間のHTMLコメントを追加することによって：

<button></button><!-- 
--><button></button> 

やPHP、あるいはを使用している場合に、HTMLのスペースを避けるために、それらの間の開放/終了タグを追加するボタンを一緒に貼り付けて、それを削除します。

<button></button><?php 
?><button></button> 

または任意の幅（その後、正常に戻ってボタンにフォントサイズを設定する）ことからスペースを回避するために0にラッパーのフォントサイズを設定すること。

td { 
    font-size: 0; 
} 
td button { 
    font-size: 1rem; 
} 

Answer 2

HTMLをあなたのボタンの間の空白をレンダリングするためです。

それを修正する方法：

---

</button><!-- 
--><button> 

3.フロートボタンは

を左へ：

1. 入れラッパーfont-size: 0;とボタンfont-size: 16px;
2. があなたのレイアウトにコメントを適用します。