爲什麼在零邊距按鈕之間添加2px空間？

Question

我特林下面，發現了兩件事情：

1. 即使我設置餘量爲0的按鈕，還有按鈕的左/右一2px空間，爲什麼（我不得不使用-2px去除空間）？

2. ，如果我有5 20%邊境2px寬度按鈕，他們將適合在一排，但使用span和div具有相同的邊界，他們將不適合在一排，我必須刪除設置爲0px邊框，或似乎對於按鈕邊框被包括到20%寬度但跨度和div邊框被添加到20%？任何人都可以解釋嗎？

在此先感謝。

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

由於是直列塊和HTML文件中的內聯元件之間空間被兌現。我修改了你的按鈕標記，所以我不會在這些按鈕之間看到額外的空間。

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設置爲默認大小）。