html - 这些 Bootstrap 按钮之间的差距来自哪里？

Question

这些 buttons他们之间有差距。我无法重现。使用检查器工具我无法弄清楚这个差距是从哪里来的。有什么想法吗？

Answer 1

它来自容器的font-size。发生这种情况是因为按钮本身设置为显示为 inline-block，这意味着它们与文本内联并且处理方式非常相似。由于标记中的每个元素之间有一个新行，因此会出现一个空格(因为这是 HTML 规范告诉浏览器如何处理新行的方式)。

我们可以用相同的显示属性自己演示:

button {
  display: inline-block;
}

<button>Foo</button>
<button>Bar</button>

如果我们增加body(本例中这些按钮的容器)的font-size，空间的大小将会增加:

body {
  font-size: 72px;
}

button {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

<button>Foo</button>
<button>Bar</button>

我们可以通过将容器的 font-size 设置为 0 来完全消除间隙:

body {
  font-size: 0;
}

button {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

<button>Foo</button>
<button>Bar</button>

另请参阅:How to remove the space between inline-block elements?