ゼロ余白ボタンの間に2pxのスペースが追加されているのはなぜですか？私は次のことをトリングた

Question

は、二つのものを見つけました：

1. も、私はボタンの0にマージンを設定し、（私が使用する必要がなぜボタンの左/右の2pxスペースが残っています-2pxスペースを取り除くために）？

2. 私は国境2pxと5 20%幅ボタンを使用している場合、彼らは1行に収まるが、同じボーダーでスパンやdiv要素を使用すると、彼らは1行に収まらない、私は、境界線を削除する必要がありますか0PXに設定ボーダーは20%の幅に含まれていますが、spanとdivのボーダーは20%に追加されていますか？誰もこれを説明できますか？

ありがとうございます。インラインブロックとHTMLドキュメント内のインライン要素との間の空間が尊重されているので

button { 
 
    height: 25px; 
 
    width: calc(100%/5); 
 
    margin: 0; 
 
    padding: 0; 
 
    background: white; 
 
} 
 

 
.test,div,span { 
 
    margin: 0 -2px; 
 
} 
 

 

 

 
div,span { 
 
    height: 25px; 
 
    width: calc(100%/5); 
 
    margin: 0 -2px; 
 
    padding: 0; 
 
    border: 2px solid black; 
 
    background: lightblue; 
 
    display: inline-block; 
 
} 
 
    
 
    
 
.noborder { 
 
    height: 25px; 
 
    width: calc(100%/5); 
 
    margin: 0 -2px; 
 
    padding: 0; 
 
    border: none; 
 
    background: lightblue; 
 
    display: inline-block; 
 
} 
 
    
 
.aqua{ 
 
    background: aqua; 
 
}

button (margin: 0px): 
 
<br><br> 
 

 
<button>Btn 1</button> 
 
<button>Btn 2</button> 
 
<button>Btn 3</button> 
 
<button>Btn 4</button> 
 
<button>Btn 5</button> 
 

 
<hr> 
 
button (margin: 0 -2px): 
 
<br><br> 
 

 
<button class="test">Btn x1</button> 
 
<button class="test">Btn x2</button> 
 
<button class="test">Btn x3</button> 
 
<button class="test">Btn x4</button> 
 
<button class="test">Btn x5</button> 
 

 
<hr> 
 
div:(margin: -2px)<br> 
 
border: 2px solid black; 
 
<br><br> 
 

 
<div>Btn 1</div> 
 
<div>Btn 2</div> 
 
<div>Btn 3</div> 
 
<div>Btn 4</div> 
 
<div>Btn 5</div> 
 

 

 
<hr> 
 
span:(margin: -2px)<br> 
 
border: 2px solid black; 
 
<br><br> 
 

 
<span>Btn 1</span> 
 
<span>Btn 2</span> 
 
<span>Btn 3</span> 
 
<span>Btn 4</span> 
 
<span>Btn 5</span> 
 

 

 
<hr> 
 
div:(margin: -2px)<br> 
 
border: none; 
 
<br><br> 
 

 
<div class="noborder">Btn 1</div> 
 
<div class="noborder aqua">Btn 2</div> 
 
<div class="noborder">Btn 3</div> 
 
<div class="noborder aqua">Btn 4</div> 
 
<div class="noborder">Btn 5</div> 
 

 

 
<hr> 
 
span:(margin: -2px)<br> 
 
border: none; 
 
<br><br> 
 

 
<span class="noborder">Btn 1</span> 
 
<span class="noborder aqua">Btn 2</span> 
 
<span class="noborder">Btn 3</span> 
 
<span class="noborder aqua">Btn 4</span> 
 
<span class="noborder">Btn 5</span>

Answer 1

。あなたのボタンマークアップを変更したので、それらのボタンの間に余分なスペースは見えません。実際には余裕はない

button { 
 
    height: 25px; 
 
    width: calc(100%/5); 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 2px solid black; 
 
    background: white; 
 
} 
 

 
.test { 
 
    margin: 0 -2px; 
 
} 
 

 

 

 
div,span { 
 
    height: 25px; 
 
    width: calc(100%/5); 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 2px solid black; 
 
    background: white; 
 
    display: inline-block; 
 
}

button (margin: 0px): 
 
<br><br> 
 

 
<button>Btn 1</button><button>Btn 2</button><button>Btn 3</button><button>Btn 4</button><button>Btn 5</button> 
 
<hr> 
 
button (margin: 0 -2px): 
 
<br><br> 
 

 
<button class="test">Btn x1</button> 
 
<button class="test">Btn x2</button> 
 
<button class="test">Btn x3</button> 
 
<button class="test">Btn x4</button> 
 
<button class="test">Btn x5</button> 
 

 
<hr> 
 
div:(margin: 0px) 
 
<br><br> 
 

 
<div>Btn 1</div> 
 
<div>Btn 2</div> 
 
<div>Btn 3</div> 
 
<div>Btn 4</div> 
 
<div>Btn 5</div> 
 

 

 
<hr> 
 
span:(margin: 0px) 
 
<br><br> 
 

 
<span>Btn 1</span> 
 
<span>Btn 2</span> 
 
<span>Btn 3</span> 
 
<span>Btn 4</span> 
 
<span>Btn 5</span>

Answer 2

。実際には、htmlコードからそこにあるスペースです。 </span>と<span>の間の区切りはスペースとしてカウントされ、ギャップとして表示されます。

この種のバグを修正するには、複数の解決策があります。私はそれらのすべてをリストアップしませんが、参照のためthisを読むことができます。私がバグを解決する方法は、inline-block-elementsを保持するコンテナのfont-sizeを0に設定することです（そして、inline-block-elementsの内部では、サイズをデフォルトに戻します）。