Это происходит из-за того, что расположение инлайн-блока зависит от вертикальной выравнивания линии базового текста (baseline). Если в инлайн-блок не добавлять текст, то он будет выравниваться по нижней границе.
Когда в элемент добавляется текст, он занимает место и изменяет высоту "строки". Элементы пытаются выровняться по baseline текста, что может привести к "смещению" элемента вверх или вниз, в зависимости от размера и положения текста.
Для решения этой проблемы можно использовать свойство vertical-align с значением top, чтобы верхняя граница инлайн-блока выравнивалась по верхней границе линии текста, или другие значения этого свойства, в зависимости от конкретной ситуации.