Как в пагинации убрать отступ справа

[Espey]

Доброго времени суток. Подскажите пожалуста как в пагинации убрать вот этот отступ справа.



Сайт: https://www.amen.in.ua/

[Espey]

Вот такой код помог:

.pagination li {
    float: left;
}

[Nexus]

Еще можно так:

.pagination { font-size: 0; }
.pagination li { font-size: 13px; }

[Espey]

Отлично, спасибо!

[Malleys]

Nexus, такой способ не учитывает настоящий размер шрифта, который используется у родителя элемента постраничной разбивки. (1rem использует размер корневого элемента, а 1em невозможно использовать из-за font-size: 0; ) На самом деле проблема-то с отступами между элементами, следовательно нужно использовать правильный display!

Espey, я вам в данном случае рекомендую использовать display: table, поскольку в совокупности с этим свойством работает border-collapse, который позволяет убрать прогалы между элементами, а также вам не нужно вручную дописывать для border дополнительные свойства, чтобы убрать двойные рамки, когда элементы находятся рядом.

Ваш код, помимо проблемы, которую я описал вначале, на данный момент не учитывает также наличие прогалов при разных размерах экранов.

Вот исправленный код, для применения которого вам нужно сперва у себя на станице удалить все (кроме тех, что внутри @media print) селекторы, которые содержат .pagination

.pagination {
	border: 1px solid #ddd;
	display: inline-block;
	border-radius: 3px;
	overflow: hidden;
	cursor: default;
}

.pagination ul {
	display: table;
	border-collapse: collapse;
	border: inherit;
	margin: -1px;
	padding: 0;
}

.pagination li {
	display: table-cell;
	border: inherit;
}

.pagination a,
.pagination span {
	padding: 7px 14px;
	text-decoration: none;
	display: block;
	text-align: center;
}

.pagination a:not(.active) {
	cursor: pointer;
}

.pagination span.pagenav {
	background: #fff;
	color: #444;
}

@media (max-width: 704px) {
	.blog .pagination {
		font-size: 0.8em;
	}
}

@media (max-width: 663px) {
	.pagination .pagination-next,
	.pagination .pagination-prev {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.pagination li:first-child span,
	.pagination li:last-child span,
	.pagination li:first-child a,
	.pagination li:last-child a {
		position: relative;
		text-indent: -500px;
	}

	.pagination li:first-child a:before,
	.pagination li:last-child a:after,
	.pagination li:first-child span:before,
	.pagination li:last-child span:after {
		position: absolute;
		left: 0; right: 0;
		text-indent: 0px;
	}

	.pagination li:first-child a:before,
	.pagination li:first-child span:before {
		content: '«'
	}

	.pagination li:last-child a:after,
	.pagination li:last-child span:after {
		content: '»'
	}
}

Рабочий пример — https://codepen.io/Malleys/pen/bGdjmwK?editors=0100

[Espey]

А как в вашем коде рамку поуже, тоненькую сделать?