如何去除CSS pagination分页器元素之间的多余空白间隙？

分页器元素间非预期空白的产生原因 #

该空白是HTML行内、行内块元素之间的换行、缩进字符被浏览器默认解析为文本节点导致的：

• 你提供的代码里每个<a>标签之间都有换行和缩进，这些空白字符在浏览器渲染时会被合并为1个普通空格，最终表现为元素之间的多余间隙，这是浏览器处理内联元素的默认规则，和你为元素手动设置的margin、padding属性无关。
• 只要你的<a>标签设置了display: inline或者display: inline-block属性，就会触发该规则。

常用修复方案 #

你可以任选一种方式处理：

1. 直接删除代码中<a>标签之间的换行与缩进，将所有<a>标签写在同一行，从根源消除空白字符

<div class="pagination">
    <a href="#">&laquo;</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">4</a><a href="#">&raquo;</a>
</div>

2. 为父容器设置font-size: 0，空白字符本质是文本节点，设置后空白会被隐藏，再单独为子<a>标签设置实际需要的字体大小即可

.pagination {
  font-size: 0;
}
.pagination a {
  font-size: 14px; /* 根据需求调整为实际字体大小 */
}

3. 改用flex布局，为父容器.pagination设置display: flex，flex布局会自动忽略子元素之间的空白节点，是目前兼容性和易用性都较好的解决方案，还可以配合gap属性灵活控制元素间距

.pagination {
  display: flex;
  gap: 4px; /* 按需调整元素之间的间距 */
}

内容的提问来源于stack exchange，提问作者Chinmay Ghule