Защо се появяват странни вдлъбнатини с "display: inline-block" и "font-size: 0"?

Здравейте. Имаше проблем. Има контейнер със следните стилове:

Той съдържа няколко обекта със следните стилове:

Ето пример за codepen: пример.

Както можете да видите, между дъното има няколко пиксела. Моля, помогнете да премахнете тази вдлъбнатина.

Дмитрий Петров: Факт е, че когато сте направили вградени (вградени) елементи, те са подравнени към основната линия на текста (вертикално подравняване: изходна линия). И базовата линия минава под буквите, без да се вземат предвид техните опашки (т.е. за текста „Арфа“, основната линия ще бъде под буквите „а“, опашките от „р“ и „е“ се игнорират). Но мястото за тези много опашки все още е запазено. Така се оказва, че отстъпът под li е запазено пространство за опашките от букви, което може да бъде на един ред с вградения li.

Същото явление може да се срещне, ако приложите img (който е вграден елемент) в div. Ще има пролука под картината отново поради базовата линия. https://jsfiddle.net/7amy5nxt/

Има няколко начина за излизане от ситуацията и в двата случая:
- задайте родителския елемент на фиксирана височина;
- задайте вертикално подравняване: средни към вградени елементи;
- направете вградени елементи блок дисплей: блок (добавете друг плувка: отляво до линията).
Във вашия случай също е възможно да замените височината на линията с подплата, както подсказва quramolt

• Защо се появяват стрии по време на бременност и как да се избегне
• Защо в урината се появяват оксалатни соли и какво е това? Какво показва тяхното присъствие по време на бременност?
• Защо се появяват акне след бръснене, какво да правя
• Когато браузърът работи, компютърът замръзва, защо и какво да правя
• Защо се появяват пигментирани петна по тялото и как да се отървете

---