Судя по картинке, у вас речь не об межстрочном интервале line-height. А именно о отступах блока в целом. Т.е. о тексте в каком-то блоке <p><quote> и т.п. В таком случае, вам стоит указывать отступы для блока через padding и margin.
На inline элемент, которым и является текст, не влияют padding и margin. Если хотите к какой-то части теста применить отступы, то вставьте эту часть в блок, отличный от display: inline.
Пример:
<style>
span {
display: inline-block;
margin: .5em;
padding: .5em;
font-size: 16px;
line-height: 1;
background: gray;
}
</style>
Свойство line-height определяет высоту одной строки текста (содержимое). Свойства padding и margin влияют на отступы от содержимого до края блока. <span>line-height влияет на высоту строки в любом случае.</span> Если текст находится не в блоке или для блока установлено display: inline то padding и margin не влияют на отступы по высоте, кроме background. Попробуйте в этом примере отключить свойство display: <b>inline-block;</b>
Вроде, как у вас на картинке https://codepen.io/tolfy/pen/pVLLXG подходит? Проблема в реализации расчета величины верхнего и нижнего отступа у блока, я не владею JS, потому поставил примерно. Если базовую линию, для обрезания низа блока, как-то можно найти и контролировать, например через vertical-align, то верхний обрез не представляю как достать .. через first-line..
up Обновил. Чтобы выдержать стиль, как у вас на картинке и при любых *size, предвижу гемор с позиционированием, шаг вправо-влево - расстрел
Простой
Простой
