如何删除 CSS 分页中元素之间的 space？

Question

意外 space 出现在简单分页的元素之间。检查这个 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>

Answer 1

实际上设置 <a> 这样的元素已经创建了 space。如果删除所有 CSS 代码，您会看到 space 仍然存在。通过添加您的 CSS，您有效地减少了突出显示的 space 之间的比例差异。因为，当你以相同的比例增加两个相邻的对象（每个 X），并且 space 之间以相同的比例增加（只有一个 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下添加边距线，并设置适合您需要的水平边距的负值即可。

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

如何删除 CSS 分页中元素之间的 space？

How to remove space between elements in a CSS pagination?

css

pagination

space

jsfiddle