0
這些buttons它們之間有差距。我無法重新創建。使用檢查工具,我無法弄清楚差距來自哪裏。有任何想法嗎?這些Bootstrap按鈕來自哪裏?
這些buttons它們之間有差距。我無法重新創建。使用檢查工具,我無法弄清楚差距來自哪裏。有任何想法嗎?這些Bootstrap按鈕來自哪裏?
它來自容器的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>
啊!有道理 - 我發現沒有差距的原因是因爲Jade會自動縮小所有內容,以便按鈕不在單獨的行中,除非您明確區分它們。謝謝! –