如何删除 CSS 分页中元素之间的空格？答案

【问题标题】：How to remove space between elements in a CSS pagination?如何删除 CSS 分页中元素之间的空格？
【发布时间】：2021-11-24 04:03:14
【问题描述】：

简单分页的元素之间出现了意想不到的空间。检查这个jsfiddle link

这背后的原因是什么？

（这是下面的分页，所以可以发布问题。）

        <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>

【问题讨论】：

你是指a标签之间的空格？
是的。我似乎无法弄清楚如何消除那个空间。我试着摆弄代码，但似乎没有任何效果。

标签： css pagination space jsfiddle

【解决方案1】：

实际上设置<a> 这样的元素已经创建了空间。如果您删除所有 CSS 代码，您将看到空格仍然存在。通过添加 CSS，您有效地减少了突出显示空间之间的比例差异。因为，当您以相同的比例（每个 X）增加两个相邻对象时，并且它们之间的空间以相同的比例增加（仅一个 X），唯一减小的是它们之间的距离相对于它们的大小.

我所做的只是在每个 .pagination a 的两侧添加一个负边距，如下所示：

.pagination a {
    display: inline-block;
    text-decoration: none;
    padding: 8px 16px;
    margin: 0px -3px;
    color: hsl(0, 0%, 0%);
    border-radius: 4px;
    transition: background-color 0.3s;
}

注意：只需在您的.pagination a 下添加边距线，并为适合您需要的水平边距设置负值。

【讨论】：

【解决方案2】：

我刚刚在this article 中找到了以下内容。

//from https://codepen.io/chriscoyier/pen/hmlqF

.pagination {
  display: flex;
}

 <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>

【讨论】：