html - 为什么零边距按钮之间要添加 2px 空间？

Question

我尝试了以下内容，发现了两件事:

1. 即使我将按钮的边距设置为0，仍然有2px按钮左/右有空格，为什么(我必须使用-2px来删除空格)？

2. 如果我有 5 20%带边框的宽度按钮2px ，它们将适合一行，但使用具有相同边框的 span 和 div 它们将不适合一行，我必须删除边框或设置为 0px，似乎按钮的边框包含在 20% 中宽度，但对于 span 和 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 文档中的内联 block 和内联元素之间的空间受到尊重。我已经修改了您的按钮标记，因此我不会看到这些按钮之间有多余的空间。

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>