为什么在零边距按钮之间添加了 2px 空间？答案

【问题标题】：Why there are 2px space added between zero margin button?为什么在零边距按钮之间添加了 2px 空间？
【发布时间】：2017-05-14 03:33:46
【问题描述】：

我正在尝试以下内容，发现了两件事：

即使我将按钮的边距设置为 0，按钮的左/右仍然有一个2px 空格，为什么（我必须使用 -2px 来删除空格）？
1234563或设置为 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>

【问题讨论】：

对于任何内联元素都是一样的。 Use block display 后面没有空格。
它们之间有空格字符。这占用了……嗯，空间。尝试删除那些。

标签： html css

【解决方案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>

【讨论】：

你说得对，这也解决了我的边框问题，好像我不应该在标签关闭后换行。谢谢！
不客气！有几种方法可以解决这个问题，您可以从here了解更多信息

【解决方案2】：

这实际上不是边距。它实际上是一个从 html 代码到那里的空间。 </span> 和 <span> 之间的间隔被计为空格，因此显示为间隙。

要修复这种错误，有多种解决方案。我不会列出所有这些，但您可以阅读 this 以供参考。我解决该错误的方法是将包含 inline-block-elements 的容器的 font-size 设置为 0（并且在 inline-block-elements 内部我将大小设置回默认值）。

【讨论】：