inline-block元素间间隙由文本空格引起，可通过font-size:0或去除HTML空格消除；垂直对齐需设置vertical-align:top/middle/bottom统一基准；推荐用flex布局替代以提升灵活性与可维护性。
在CSS布局中，inline-block 是一种常用的布局方式，它结合了块级元素和行内元素的特点：既能像行内元素一样并排排列，又能设置宽高、内外边距等块级属性。但在实际使用中，常会遇到元素之间出现莫名的间距，以及垂直对齐问题。下面详细介绍如何解决这些问题。
消除inline-block元素间的默认间距
当多个 display: inline-block 元素写在HTML中换行或有空格时，浏览器会将其视为文本间的空格，从而产生约4-8px的间隙。
常见解决方案：
- 去掉HTML中的空格与换行：将所有 inline-block 元素写在同一行，避免标签之间的空白符。
- 父容器设置 font-size: 0：因为空隙大小受字体影响，设为0可消除间隙，再单独设置子元素的字体大小。
- 使用负margin：如 margin-right: -4px，抵消空隙，但不够灵活。
- 使用注释连接标签：在标签之间插入HTML注释，阻止空格被渲染。
示例：通过 font-size: 0 消除间隙
立即学习“前端免费学习笔记（深入）”；
.container {
font-size: 0;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
font-size: 16px; /* 重置字体 */
background: #007acc;
}
控制inline-block元素的垂直对齐
inline-block 元素默认基线对齐（vertical-align: baseline），这可能导致元素看起来上下错位，尤其在高度不一致或包含文本时。
常用 vertical-align 值：
- top：顶部对齐，适合希望元素上沿对齐的场景。
- middle：居中对齐，常用于图标与文字同行显示。
- bottom：底部对齐，最稳定，可避免意外错位。
建议统一设置 vertical-align，避免默认行为带来的布局偏差。
示例：统一垂直对齐方式
.item {
display: inline-block;
vertical-align: top; /* 或 middle / bottom */
}
适用场景与替代方案
inline-block 曾广泛用于多列布局、导航菜单、图片列表等。但随着 Flexbox 和 Grid 的普及，这些现代布局方式更灵活、语义更清晰。
如果项目兼容性允许，推荐使用 flex 布局代替 inline-block，避免处理空隙和对齐的麻烦。
Flex 示例：简单实现等分布局
.container {
display: flex;
}
.item {
flex: 1;
height: 100px;
background: #007acc;
}
基本上就这些。inline-block 虽然有些“坑”，但理解其行为后仍可在特定场景下有效使用。关键是掌握间距成因与对齐机制，才能灵活应对各种布局需求。
