Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Add space between pagination links with CSS
Pagination links often appear too close together by default. Adding space between pagination links improves readability and provides better visual separation. This can be achieved using CSS properties like margin, padding, or gap.
Syntax
/* Method 1: Using margin */
.pagination a {
margin: value;
}
/* Method 2: Using gap (for flex/grid containers) */
.pagination {
display: flex;
gap: value;
}
Method 1: Using Margin
The following example adds space between pagination links using the margin property −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: #333;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 4px;
border-radius: 4px;
transition: background-color 0.3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h3>Page Navigation</h3>
<div class="pagination">
<a href="/prev">« Previous</a>
<a href="/page1">1</a>
<a href="/page2">2</a>
<a href="/page3" class="active">3</a>
<a href="/page4">4</a>
<a href="/next">Next »</a>
</div>
</body>
</html>
A horizontal pagination component with evenly spaced links. Each link has a gray border, padding, and 4px margin on left and right sides. The active page (3) appears with a green background and white text.
Method 2: Using Flexbox Gap
Modern browsers support the gap property for flex containers, providing a cleaner approach −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: flex;
gap: 10px;
align-items: center;
}
.pagination a {
color: #007bff;
padding: 10px 15px;
text-decoration: none;
border: 2px solid #007bff;
border-radius: 25px;
transition: all 0.3s ease;
}
.pagination a.active {
background-color: #007bff;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #e7f3ff;
}
</style>
</head>
<body>
<h3>Modern Pagination</h3>
<div class="pagination">
<a href="/prev">?</a>
<a href="/page1">1</a>
<a href="/page2">2</a>
<a href="/page3" class="active">3</a>
<a href="/page4">4</a>
<a href="/page5">5</a>
<a href="/next">?</a>
</div>
</body>
</html>
A flexbox-based pagination with 10px gaps between rounded pill-shaped links. The active page (3) appears filled with blue background, while others have blue borders with transparent backgrounds.
Conclusion
Adding space between pagination links can be achieved using margin for individual link spacing or gap with flexbox for modern, consistent spacing. The flexbox approach provides better control and cleaner code.
Updated on: 2026-03-15T13:00:39+05:30
451 Views
Advertisements