display: inline-block 分页按钮间缝隙是html解析空白字符所致，非bug；常见解决法为父容器设font-size: 0、单侧margin+first/last-child控制、vertical-align统一，或改用flex+gap。
为什么 display: inline-block 分页按钮之间总有缝隙
这不是 bug，是 HTML 解析空格和换行符导致的渲染行为。只要按钮标签之间有空白字符（比如回车、缩进、空格），inline-block 元素就会把它当作文本节点，渲染出约 4px 的间隙。
常见表现：分页数字排列不紧凑，左右留白不对称，margin 调整失效或效果错乱。
- 用
font-size: 0在父容器上“吃掉”空白字符的渲染高度（最常用） - 把所有
<li>或<a></a>写在同一行，消除 HTML 源码中的换行和空格（可读性差，不推荐） - 用
float: left替代inline-block（需额外清除浮动，维护成本略高）
margin 设置不当会让分页布局崩掉
给 inline-block 分页项加 margin 时，左右 margin 叠加容易撑破容器宽度；上下 margin 则可能因垂直对齐方式（vertical-align）引发意外偏移。
典型错误：margin: 0 5px 在 10 个按钮上累积出 90px 额外宽度，超出父容器。
立即学习“前端免费学习笔记（深入）”；
- 优先用
margin-left或margin-right单侧留白，第一项/最后一项用:first-child/:last-child去除多余 margin - 显式设置
vertical-align: middle或top，避免基线对齐导致高低不一 - 若需等距间隔，建议用
gap+display: flex替代（现代方案更稳）
兼容性与 fallback 方案怎么选
inline-block 本身 IE8+ 全支持，但配合 font-size: 0 在低版本 Android Browser 有渲染异常风险；而 flex 的 gap 在 Safari 14.1 之前不支持。
如果必须兼容老环境且坚持用 inline-block：
ul.pagination {
font-size: 0; /* 关键：消灭间隙 */
}
ul.pagination li {
display: inline-block;
font-size: 14px; /* 子元素恢复字号 */
vertical-align: top;
}
ul.pagination li + li {
margin-left: 8px;
}若只需支持 Safari 14.1+/Chrome 89+，直接用 flex 更干净：
ul.pagination {
display: flex;
gap: 8px;
}
ul.pagination li {
display: block;
}移动端点击区域太小怎么办
纯靠 padding 扩展点击热区时，inline-block 的行高继承和 vertical-align 会干扰实际生效范围，尤其在 iOS Safari 中容易触发 300ms 延迟或点击失灵。
- 给
a标签设display: inline-block+ 显式line-height和min-width - 用
touch-action: manipulation减少延迟（iOS 9.3+） - 避免只靠
padding-top/padding-bottom，上下 padding 必须成对设置，否则vertical-align行为不可控
真正难处理的是嵌套结构里 inline-block 和 line-height 的叠加影响——这时候不如切到 flex，省去一半调试时间。
