Thêm khoảng cách giữa các liên kết phân trang với CSS

Giới thiệu

Bạn có thể thử mã sau để thêm khoảng cách giữa các liên kết phân trang với CSS:

Ví dụ

<!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>Các bài Quiz của chúng tôi</h2>
    <div class="demo">
        <a href="prev.html">&lt;</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">&gt;</a>
    </div>
</body>
</html>