How to remove space between elements in a CSS pagination?-CodePudding

Unintended space appears between elements of a simple pagination. Check this jsfiddle link

What's the reason behind this?

(This is the pagination below so the question can be posted.)

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

CodePudding user response：

I've just found the following in 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>

CodePudding user response：

Actually setting <a> elements like that already create the spaces. If you remove all CSS code, you will see that the spaces remain. By adding your CSS, you effectively reduced the proportional difference between the highlighted spaces. Because, as you increase two adjacent objects by the same proportion (each of them X), and the space between increases in the same proportion (one X only), the only thing that decreases is their distance to each other in relation to their size.

All I did was add a negative margin on both sides of each .pagination a like so:

.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;
}

Note: Just add the margin line under your .pagination a and set the negative value for the horizontal margin that suits your needs.