display: inline-block 是分页按钮的常见选择，因其支持并排排列、宽高设置且不脱离文档流，兼容IE8+；但需处理换行间隙，常用 font-size: 0 或无空格HTML解决。
为什么 display: inline-block 是分页按钮的常见选择
因为分页按钮需要并排排列、支持宽高设置，又得保持文档流内布局 —— float 会脱离流、flex 在老浏览器兼容性差，而 inline-block 兼顾可控性和兼容性（IE8+ 均支持）。但它自带“换行间隙”，这点必须处理。
如何消除 inline-block 按钮间的空白缝隙
这是最常踩的坑：HTML 中按钮标签间的换行或空格会被渲染成约 4px 的空白间隙，导致按钮无法紧密排列。
- 在父容器上设置
font-size: 0，子元素内再重设字体大小（如font-size: 14px） - 或把 HTML 中的按钮写成无换行格式：
123 - 不推荐用
letter-spacing: -4px，易误伤文字内容
margin 控制间距时的关键细节
用 margin 隔开按钮比用 padding 更合理，因为它是按钮之间的“呼吸感”，不影响点击区域本身。
- 统一用
margin-left（除第一个按钮外），避免首尾多出多余边距 - 慎用
margin: 0 4px—— 上下 margin 对inline-block无效，仅左右生效 - 若需悬停高亮，建议给
background+border，而非仅靠 margin 变化，否则布局会抖动
一个可用的最小分页样式片段
以下代码可直接嵌入项目，已处理间隙和基础交互：
立即学习“前端免费学习笔记（深入）”；
.pagination {
font-size: 0;
}
.pagination span {
display: inline-block;
font-size: 14px;
padding: 6px 12px;
margin-left: 4px;
background: #f5f5f5;
border: 1px solid #ddd;
cursor: pointer;
}
.pagination span:first-child {
margin-left: 0;
}
.pagination span:hover,
.pagination span.active {
background: #007bff;
color: white;
border-color: #007bff;
}
注意：如果分页数动态生成，务必确保 span.active 类准确应用到当前页；服务端渲染时容易漏掉这个 class，前端 JS 切换页码时也别忘了同步更新。
