display: inline-block 元素會在以下情況下顯示間隙：
-
HTML 中的空格、換行符和製表符: 這是最常見的原因。瀏覽器會將
inline-block元素之間的空白字元渲染成一個空格。即使你的程式碼看起來很緊湊，如果 HTML 原始碼中存在空格或換行，也會產生間隙。 -
字型大小和行高:
inline-block元素的行高和字型大小會影響其基線的位置。如果相鄰元素的基線不一致，也可能導致間隙出現，尤其是在垂直排列的情況下。 -
字母基線差異: 不同的字型或字號，即使行高相同，也可能因為字母基線的差異而產生微小的間隙。
-
margin 和 padding:
inline-block元素的margin和padding會像塊級元素一樣影響佈局，從而產生間隙。
以下是一些解決 inline-block 元素間隙的方法：
- 移除 HTML 中的空格: 最直接的方法是刪除元素之間的空格、換行符和製表符。你可以將所有
inline-block元素寫在一行，或者使用 HTML 註釋來去除空格。例如：
<span>item 1</span><!--
--><span>item 2</span><!--
--><span>item 3</span>
- 設定父元素的
font-size: 0;: 將父元素的字型大小設定為 0，可以消除由空格引起的間隙。然後，在inline-block元素上重新設定所需的字型大小。
<div style="font-size: 0;">
<span style="font-size: 16px;">item 1</span>
<span style="font-size: 16px;">item 2</span>
<span style="font-size: 16px;">item 3</span>
</div>
-
使用負 margin: 可以對
inline-block元素使用負 margin 來抵消間隙。但這需要仔細調整 margin 值，並且可能難以維護。 -
使用
float: 將inline-block元素設定為float: left;或float: right;可以消除間隙，但需要清除浮動以避免後續佈局問題。 -
使用 Flexbox 或 Grid: Flexbox 和 Grid 佈局提供了更靈活和強大的佈局方式，可以輕鬆避免
inline-block元素的間隙問題。推薦使用這種現代佈局方式。
選擇哪種方法取決於具體的佈局需求和個人偏好。通常情況下，font-size: 0; 和 Flexbox/Grid 是比較推薦的解決方案。