Search code examples
csspaginationspacejsfiddle

How to remove space between elements in a CSS pagination?

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

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