Проблема Line height с элементами inline-block

line-height применяется, но вам нужно понять, как она применяется. Если мы ссылаемся на спецификацию:

В элементе контейнера блока, содержимое которого состоит из элементов inline-level, line-height задает минимальную высоту линейных блоков внутри элемента

Устанавливая line-height: 5 для родительского элемента, вы устанавливаете минимальную высоту для linebox.

На незаменяемом inline элементе line-height указывает высоту, которая используется при расчете высоты линейного блока.

Установив line-height:1,5;, вы определили высоту строки.

Чтобы объяснить это проще, - у вас есть linebox с высотой, равной 1,5, внутри linebox с высотой, равной 5, но вы не сможете это увидеть.

Если вы увеличите line-height для child и достигнете5, вы достигнете минимальной высоты и начнете увеличивать linebox, определенный родительским элементом.

Чтобы увидеть это, вам нужно применить vertical-align. Если line-height дочернего элемента меньше, чем line-height родительского элемента, вы можете выровнять:

.container { 
  max-width: 200px; 
  border: 2px black solid; 
  line-height: 5; 
} 
 
.container>a { 
  line-height: 1.5; 
}

<div class="container"> 
  <a>First</a> 
  <a style="vertical-align:top;">Second</a> 
  <a>Third</a> 
  <a style="vertical-align:bottom;">Fourth</a> 
</div>

Если вы увеличите line-height, вы увидите, что выравнивание не будет иметь никакого эффекта, так как linebox равен по высоте linebox родителя, и нет места для вертикального выравнивания:

container { 
  max-width: 200px; 
  border: 2px black solid; 
  line-height: 5; 
} 
 
.container>a { 
  line-height: 5; 
}

<div class=container> 
  <a>First</a> 
  <a style="vertical-align:top;">Second</a> 
  <a>Third</a> 
  <a style="vertical-align:bottom;">Fourth</a> 
</div>

Чтобы сделать своего рода аналогию, это похоже на установку height/min-height внутри контейнера flexbox. Когда высота элемента меньше, мы можем выровнять:

.container { 
  max-width: 200px; 
  border: 2px black solid; 
  min-height:100px; 
  display:flex; 
  align-items:flex-start; 
} 
 
.container>a { 
  height:20px; 
  background:red; 
}

<div class=container> 
  <a>First</a> 
  <a style="align-self:center;">Second</a> 
  <a>Third</a> 
  <a style="align-self:flex-end;">Fourth</a> 
</div>

Но когда height больше и достигает минимума, определенного родителем, выравнивать нечего, и общая высота родителя может увеличиться, если мы продолжим увеличивать высоту childs:

.container { 
  max-width: 200px; 
  border: 2px black solid; 
  min-height:100px; 
  display:flex; 
  align-items:flex-start; 
} 
 
.container>a { 
  height:110px; 
  background:red; 
}

<div class=container> 
  <a>First</a> 
  <a style="align-self:center;">Second</a> 
  <a>Third</a> 
  <a style="align-self:flex-end;">Fourth</a> 
</div>

Вы также можете заметить, что вы применяете width: 100%, которое не будет влиять на inline элемент, но будет применяться к inline-block, заставляя каждый элемент размещаться на отдельной строке.

Та же логика все еще применима: каждая строка имеет минимальную высоту, определяемую родительской высотой строки, и может увеличиваться только в том случае, если высота строки дочернего элемента больше родительского элемента.

Чтобы доказать, что inline иinline-block ведут себя одинаково, вы можете вызвать разрыв строки с помощью элемента inline, и вы получите тот же эффект:

.container { 
  max-width: 200px; 
  border: 2px black solid; 
  line-height: 5; 
} 
 
.container>a { 
  line-height: 1.5; 
} 
.alt > a{ 
  display:inline-block; 
  width:100%; 
}

<div class=container> 
  <a>First</a><br> 
  <a>Second</a><br> 
  <a>Third</a><br> 
  <a>Fourth</a> 
</div> 
 
<div class="container alt"> 
  <a>First</a> 
  <a>Second</a> 
  <a>Third</a> 
  <a>Fourth</a> 
</div> 
 Run code snippet

Теперь, если вы установите a в качестве элементаblock, у вас больше не будет элемента уровня inline внутри родительского контейнера, поэтому егоline-height не будет иметь никакого эффекта

.container { 
  max-width: 200px; 
  border: 2px black solid; 
  line-height: 5; 
} 
 
.container>a { 
  display: block; 
  line-height: 1.5; 
  width: 100%; 
}

<div class=container> 
  <a>First</a> 
  <a>Second</a> 
  <a>Third</a> 
  <a>Fourth</a> 
</div>

Добавьте текст внутри родительского элемента, и вы увидите, что line-height снова будет определена, чтобы определить линию, где находится текст:

.container { 
  max-width: 200px; 
  border: 2px black solid; 
  line-height: 5; 
} 
 
.container>a { 
  display: block; 
  line-height: 1.5; 
  width: 100%; 
}

<div class=container> 
  <a>First</a> 
  <a>Second</a> 
  <a>Third</a> 
  <a>Fourth</a> 
  some text 
</div>

Несколько интересных вопросов:

Why is the span's line-height is useless?

I do not "get" the vertical-align css property

Why is there space between line boxes, not due to half leading?