为什么在零边距按钮之间添加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设置为默认大小）。