CSS से पेजिनेशन लिंक्स के बीच स्पेस (जगह) जोड़ें

CSS में पेजिनेशन लिंक्स के बीच स्पेस जोड़ने के लिए margin, gap (फ्लेक्स/ग्रिड में), या बॉर्डर/पैडिंग तकनीकों का उपयोग किया जा सकता है। यह लिंक्स को अलग-अलग बटन जैसा दिखाता है और क्लिक करने में आसान बनाता है।

उदाहरण

नीचे दिए गए उदाहरण में, पेजिनेशन लिंक्स पर बॉर्डर, पैडिंग, होवर प्रभाव, एक्टिव स्टेट, और पहले/अंतिम लिंक पर गोल कोने लागू किए गए हैं।

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      display: inline-block;
    }
    .demo a {
      color: red;
      padding: 5px 12px;
      text-decoration: none;
      transition: background-color 2s;
      border: 1px solid orange;
    }
    .demo a.active {
      background-color: orange;
      color: white;
      border-radius: 5px;
    }
    .demo a:hover:not(.active) {
      background-color: yellow;
    }
    .demo a:first-child {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    .demo a:last-child {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  </style>
</head>
<body>
  <h2>Our Quizzes</h2>
  <div class="demo">
    <a href="prev.html"><</a>
    <a href="quiz1.html">Quiz1</a>
    <a href="quiz2.html">Quiz2</a>
    <a href="quiz3.html" class="active">Quiz3</a>
    <a href="quiz4.html">Quiz4</a>
    <a href="next.html">></a>
  </div>
</body>
</html>

स्पेस जोड़ने के तरीके:

• margin-right: 5px प्रत्येक लिंक पर (अंतिम को छोड़कर)
• फ्लेक्सबॉक्स: .demo { display: flex; gap: 5px; }
• ग्रिड: .demo { display: grid; grid-auto-flow: column; gap: 5px; }
• बॉर्डर ओवरलैप: border-right: none और :last-child { border-right: ... }