Пользовательская пагинация django в CSS

Хотелось бы, чтобы кнопки пагинации имели небольшой промежуток между собой! Не так как сейчас :

enter image description here

Я не понимаю, как параметр display и justify работают вместе. Что я должен изменить в css, чтобы разделить их. Спасибо за помощь. Вот мой код :

html

    <div class="pagination">
        {% if files.has_previous %}
        <a class="pagination-action" href="?page=1">
            <i class='bx bx-chevrons-left' aria-hidden="true"></i> </a>
        <a class="pagination-action" href="?page={{ files.previous_page_number }}">
            <i class='bx bx-chevron-left' aria-hidden="true"></i>
        </a>
        {% endif %}
        {% for num in files.paginator.page_range %}
            {% if files.number == num %}
                <span class="pagination-number pagination-current">{{ num }}</span>
            {% elif num > files.number|add:'-3' and num < files.number|add:'3' %}
                <a class="pagination-number" href="?page={{ num }}">{{ num }}</a>
            {% endif %}
        {% endfor %}
        {% if files.has_next %}
            <a class="pagination-action" href="?page={{ files.next_page_number }}">
                <i class='bx bx-chevron-right' aria-hidden="true"></i>
            </a>
            <a class="pagination-action" href="?page={{ files.paginator.num_pages }}">
                <i class='bx bx-chevrons-right' aria-hidden="true"></i>
            </a>
        {% endif %}
    </div>

css

.pagination {
    display: flex;
    margin-top: 15px;
    align-items: center;
    justify-content: center;
}

.pagination a {
    text-decoration: none;
}

.pagination-number {
    padding: 12px 17px;
    border-radius: 2px;
    color: #fff;
    background-color: #6D85C7;
}

.pagination-number:hover,
.pagination-current {
    background-color: #3354AA;
}

.pagination-action {
    margin: 0 2px;
    display: flex;
    padding: 1px 2px;
    color: #fff;
    font-size: 1.3em;
    align-items: center;
}

.pagination-action:hover,
.pagination-previous,
.pagination-next {
    color: #3354AA;
}

Вы можете добавить пробел селектора .pagination-number(имя класса контейнера Number).

.pagination-number {
   gap:10px;
}

Я изменил эту часть своего кода :

#customers .iconsColumn{
    display: flex;
    flex-direction: row;
    justify-content : space-around;
}
Вернуться на верх