这些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>

我们可以通过给容器0 font-size彻底清除的差距：

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?