這些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?