Имеется блок-список, внутри элементы списка оформлены как [inline-block]
Если задать этим элементам [overflow: hidden], то между строками появляется паразитный интервал

На первый взгляд, дело в [line-height]. Но если элементам списка задать [line-height: 1], то проблема сохраняется, хотя высота строки при этом уменьшается до высоты текста (размера шрифта). Что это за интервал такой аномальный ?

https://jsfiddle.net/mmp4o090/2/

DeanWinchesterCyrax_02,
https://stackoverflow.com/questions/17768922/how-to-remove-unwanted-vertical-spacing-between-divs Да, помогает задание списку [vertical-align: top] или [vertical-align: bottom]
Проблема имеет место при [vertical-align: baseline] (по умолчанию) и [vertical-align: middle]

Но здесь бы ещё логическое объяснение озвучить:

1 .Почему [li / vertical-align] влияет на вертикальное позиционирование [inline-block]-элементов списка, когда и элементы списка, и сам <ul> имеют [line-height], равный размеру шрифта ? В этом случае высота строки и базовая линия у <ul> и <li> совпадают. Следовательно, что [vertical-align: top], что [vertical-align: baseline] - разницы быть не должно и дополнительных интервалов быть не должно

2 . Почему для [inline-block]-элементов [line-height] определяет собственную (внутреннюю) высоту этих элементов (без учёта полей и границ) ? И только за счёт собственной высоты влияет на высоту строки, в которой элементы расположены. Согласно теории, должен определять высоту строки, в которой расположены эти элементы, но не менять внутреннюю высоту этих элементов.

3 . Почему в сабжевом примере проблема имеет место только при [overflow: hidden] ?

авторДа, помогает задание списку [vertical-align: top] или [vertical-align: bottom]Поправлюсь: не списку, а элементам списка <li>

На все 3 вопроса ответы получил. Связано это с особенностями построения строчного контекста форматирования в CSS, а тажке с порядком определения базовой линии [inline-block]-элементов.

Если кому интересно, могу объяснить. Если же всем пофигу, не буду тратить время.
Судя по активности в теме, всем пофигу...

авторпросто это такое специфическое использование, что всем просто нечего сказатьНа самом деле причина сабжевой проблемы достаточно фундаментальна. И приводит к проблемам во вполне себе рядовых ситуациях (создаёт проблемы "на пустом месте"). Например:

1 . Если внутри абзаца указать <span> и задать ему какой-нибудь [font-style], то появится тот же самый "аномальный" интервал между строками. Видимая высота строки будет выше [line-height]. И [overflow: visible] здесь не поможет
2 . Если элемент маркированного списка содержит ссылку (или любой другой строчный элемент) и этой ссылке (элементу) задать [display: inline-block], то маркер окажется на уровне последней строки, а не первой

P.S . Вообще, во всех строках присутствует ещё кое-кто. Невидимый, неслышимый. И это не пробел.
Некий фантом, который наводит ужас на верстальщиков...

авторline-height : 1; - это что за единица измерения?Безразмерный коэффициент от размера шрифта (похож на em , но имеет пару особенностей)

авторЕсли указать
ul { line-height: 10px; }
li { line-height: 16px; }

то можно исправить ситуацию. Этот способ-подгонка от лукавого, т.к. принудительным уменьшением [line-height] списка <ul> мы обрезаем содержимое строк, но не уменьшаем (не нормализуем) отрендеренный (видимый) [line-height]

авторНет никаких подгонок от лукавого, нужно оперировать чёткими размерами и определениями/стандартами. Подгонка от лукавого есть. Она же заплатка. И заключается она в том, что уменьшая [line-height] списка <ul>, за счёт наследования этого свойства вы уменьшаете [line-height] того невидимого "фантома" , о котором я говорил. И начиная с некоторого значения [line-height] этот "фантом" совместно с <li> (который имеет собственный [line-height]) уже не создаёт того "аномального" интервала между строками, о котором говорится в сабже. Уже то обстоятельство, что [line-height] списка <ul> нужно подбирать , говорит о том, что применяемый метод - чистой воды заплатка .

Что касается рекомендации " оперировать чёткими размерами ", то эта рекомендация является ошибочной. Поскольку в современной адаптивной вёрстке в большинстве случаев более корректным является использование относительных единиц: em , % , коэффициенты для [line-height] и пр.

Касательно " нужно оперировать чёткими ... определениями/стандартами ". Не знаю, о каких определениях и стандартах вы здесь говорите применительно к сабжевой проблеме, но остаётся фактом то, что вы так и не объяснили причину появления "аномального" интервала между строками в сабжевом примере .

авторСабжевая "проблема" - это не проблема, потому что одинаково рендерится в нескольких браузерах,
следавательно нужно учитывать все применяемые стили, влияющие на высоту строки (в том числе и [padding]Сабжевая проблема заключается не в том, что приведённый пример по разному рендерится в браузерах, а в том, что при одинаковых [line-height] всех элементов списка появляется дополнительный интервал между строками.

У всех элементов списка поля и границы нулевые. [line-height], задаваемый списку <ul>, сам по себе (непосредственно) не уменьшает отрендеренную (видимую) высоту строки, поскольку применительно к [block] и [inline-block]-элементам свойство [line-height] работает как минимальный [line-height]. Посему остаётся непонятным, какие ещё стили, влияющие на высоту строки, вы предлагете учитывать.

авторВы не можете для всей строки задать [overflow: hidden], так как это строка. Вы указываете для отдельных элементов строки стиль [overflow: hidden]. Этим вы не уменьшаете высоту строки.В сабжевом примере [overflow: hidden] задан не для того, чтобы уменьшить высоту строки, а потому, что этим свойством <li> должны обладать в реальной задаче. Но при [overflow: hidden], как обнаружилось, появляется сабжевая проблема с "аномальным" интервалом. Вот и приведёт в сабже пример, который воспроизводит обнаруженную проблему.

авторИли отказывайтесь от [overflow: hidden], или разруливайте с помощью разных значений [line-height], или применяйте [float:left], и т.д. и т.п. Отказ от [overflow: hidden], подгонка [line-height] списка <ul> и использование [float] - это всё варианты обхода проблемы, но не её решения. А для решения проблемы нужно знать особенности построения строчного контекста форматирования в CSS, а тажке порядок определения базовой линии [inline-block]-элементов, о чём я писал выше.

авторПоскольку стили по-умолчанию наследуются от родителя, то нет никакой проблемы сделать чётко то, что требуется,
а не фантазировать непонятными образами. авторНет никаких подгонок от лукавого, нужно оперировать чёткими размерами и определениями/стандартами.авторРезультат рендеринга предсказуем на 100%, а что Вы ещё хотели?Это вы о чём ? Американцы тоже утверждали, что у них есть неопровержимые доказательства, но... эти доказательства они никому не предоставят, поскольку это военная тайна. Если для вас результат предсказуем на 100%, изложите логику появления этого "аномального" интервала. А до тех пор у читателей сабжа будут возникать нездоровые ассоциации с тем поляком-болтуном, который в передаче "Место встречи" участвует...

На фоне того, что мне известна причина появления этого интервала , о чём я написал пару дней назад, и того, что вы так и не объяснили причину , ваши вот эти слова выглядят неадекватно:
авторЧистая фантазия, пичины которой просты - Вы не понимаете, как у вас работает вёрстка

авторВы указываете для отдельных элементов строки стиль [overflow: hidden]
Вот поэтому и появляются отступы, так как между строками всегда есть и был интервал.Если под "интервалом между строками" вы понимаете видимое расстояние между буквами и прочим видимым содержимым строк, то это самое расстояние входит в саму строку. И нет там никакого интервала между строками. Сабжевая проблема касается вопроса, почему высота строк списка превышает высоту элементов списка.

В частности, вашу логику опровергают следующие факты:
1 . Если элементам списка задать [vertical-align: top], то даже при [overflow: hidden] никакого лишнего интервала не будет
2 . Если элементам списка задать [display: inline] , то по-прежнему никакого лишнего интервала не будет

В данном случае причина появления дополнительного визуального интервала - в том, что базовая линия [inline-block]-элементов находится на разном уровне при [overflow: visible] и [overflow: hidden]

авторВот вариант универсальнее:
ul { line-height: 1px; } /* line-height: 0; */
li { line-height: 1; }
Что мешает это использовать? В чём проблема? В данном случае дополнительный видимый интервал исчезнет. Почему - вы не знаете, так ? Ведь [line-height] применительно к блочным элементам, коим является <ul>, определяет только минимальный [line-height], а конечный [line-height] определяется высотой содержимого (именно поэтому высота строки не уменьшается меньше, чем высота элементов списка).

В любом случае это заплатка, которая имеет потенциальные проблемы. Если в списке некоторому элементу не будет явно задан [line-height], то он унаследует малый [line-height] от самого списка со всем вытекающими. И вообще, это семантически неверно - задавать крайне малый [line-height], чтобы получить некоторый нормальный [line-height]...