什么是 inline-block？
inline-block 是 CSS 中一种重要的显示（display）属性值。
它结合了 inline（行内）和 block（块级）元素的特点：
元素在一行内排列（像行内元素），同时可以设置宽度、高度、内外边距等（像块级元素）。
基本用法示例
以下是一组使用 display: inline-block 的色块：
A
B
C
注意：这些方块在同一行显示，并且保留了块级特性。
常见问题与技巧
- 空白间隙问题：HTML 源码中的换行或空格会导致 inline-block 元素之间出现间隙。可通过设置父容器
font-size: 0或使用注释消除。 - 垂直对齐：默认
vertical-align: baseline可能导致错位，建议显式设置为top、middle等。 - 兼容性：现代浏览器完全支持；IE8+ 支持良好。
适用场景
inline-block 常用于创建横向导航菜单、图标列表、卡片式布局等需要“既同行又可控尺寸”的场景。
虽然 Flexbox 和 Grid 更强大，但在简单布局中，inline-block 依然轻量高效。