От куда берутся пустые отступы в верстке, если в стилях они не заданы?

Question

[Senseich]

Возможно вопрос глупый, но я не могу понять каким образом добавляются дополнительные отступы между пунктами навигации? Сразу скажу - верстал не я.
Подробнее:
1. Сначала первый момент - есть верстка странички: scout.beget.tech/templates/news.html
После списка новостей идет навигация постраничная. Между пунктами навигации расстояние, которое судя по стилям margin-right: 3px;, но от куда остальное расстояние берется?
Вот скриншот, чтобы было понятнее: prntscr.com/hz8pj4

2. Второй момент, ещё мистичнее ) Я внедряю верстку на движок Битрикс: new.scout.beget.tech/news
Если посмотреть, то верстка полностью идентична, но у некоторых пунктов этот отступ пропадает, а у некоторых нет: prntscr.com/hz8s6d

Всю голову сломал, ну не пойму почему так происходит! Быть может кто найдет подвох? )

Comments

[Станислав]

по второму пункту никакой мистики, всего скорее стоит технический пробел после ссылки, т.е. вот такой вот
...../a> <a.....
Отсюда и отступ у некоторых ссылок (ПС. код сайта не смотрел, но другого объяснения явно быть не может)

Answer 1

[Exploding]

Потому, что это хоть и блоки, но inline! А inline это вам не block!
Так норм?


Поставьте им display:block; float: left; как вариант
или display: table-cell;
P.S. А что за "piningation"? Даже гугл такого не знает)))

Comments

[Senseich]

Т.е. дело в переносе строк?

[Exploding]

Senseich, в данном случае да, если хотите inline-block так и оставить

[Senseich]

Exploding, Никогда не замечал такого поведения инлайн блоков, даже не задумывался )

[Exploding]

Senseich, Это потому, что зачастую пагинацию выводит цикл в скрипте, и все лишние пробелы/табы и т.д. отсутствуют. А поскольку вы просто сохранили страницу локально и потом хз что там с ней делали... вот и результат такой получился:)

[Senseich]

Exploding, все верно, через цикл выводится пункты

[Одиночка Айс]

Послушайте совета пользователя eRKa, это самый лучший вариант

[Exploding]

Одиночка Айс,
А по-моему, из десятка вариантов решений, вариант с font-size:0 это мягко говоря, самый не подходящий. Ибо если, как в большинстве случаев, размер шрифта наследуется - получим такое

[eRKa]

Exploding, все верно. Но мне показалось лишним дописывать очевидное, что в этом случае нужно обязательно в дочерних определить размер шрифта.
a.pin { font-size: 18 }
Для локальных небольших мест, я считаю вполне допустимым вариантом.

[Одиночка Айс]

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

[Exploding]

eRKa, Да понятное дело, что и font-size: 0 тоже будет работать, и не создаст как-то проблем или еще чего. Тут уже личное дело каждого. Я, например, вообще первый раз о таком приеме слышу, так что вот и себе почерпнул каплю знаний благодаря вашему ответу:)
А "высасывать из пальца" темы для споров, в которых по сути и конечной цели нет, я например не хочу, хотя некоторым нравится вот так по-топтаться на месте и доказывать что 2рх рамка намного красивей чем в 1рх, особенно если красная!))))

Answer 2

[eRKa]

Вообще дело немного в другом. Убрать разрывы строк в html это всего лишь трюк.
Причины и разные варианты решения есть здесь.
В Вашем случае справляется добавление в .piningation-down font-size: 0px;

Answer 3

[Владимир Юрченков]

Непонятно от куда.. но если добавить display: inline-flex;
для .piningation-down, .toolbar-down 2426 строка

то они пропадут

Comments

[Senseich]

Вот и я про что, непонятно. Что интересно, все идентично, но по разному )