Line height issue with inline-block elements

Question

For some reason, these anchor tags aren\'t applying their own line height, but instead, they use the parent\'s one.

It is applied only in the case in which the ancho

Answer 1

The line-height is applying but you need to understand how it's applying. If we refer to the specification:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element

By setting line-height:5 on the parent element you set a minimum height for the linebox.

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

By setting line-height:1.5 you defined the height of your element inside the linebox.

To make it easier, you have an element with a height equal to 1.5 inside a linebox with a height equal to 5¹ but you cannot visually see this. If you inscrease the line-height of child and you reach 5 you will then reach the minimum height and you will start increasing the linebox previously defined by the parent element.

To see this you need to apply vertical-align. If the line height of child element is smaller than the line height of the parent (the height of the child smaller than the height of the linebox) you can align:

.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>

If you increase the line-height you will see that the alignment will have no effect since the element is equal in height to the linebox of the parent and there is no room to vertically align:

.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>

---

To make a kind of analogy, it's like setting height/min-height inside flexbox container.

When the height of element is smaller we can align:

.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>

But when the height is bigger and reach the minimum defined by the parent, there is nothing to align and the overal height of the parent may increase if we keep increasing the height of 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>

---

You may also note that you are applying width:100% on the a which will have no effect on inline element but will apply to inline-block making each element to be placed on a different line. The same logic still apply: Each line has a minimun height defined by the parent line-height and can only increase if the line-height of the child element are bigger.

To proove that inline and inline-block behave the same you can force a line break with the inline element and you will have the same effect:

.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>

---

Now if you set the a to be block element you no more have inline level element inside the parent container thus its line-height will have no effect

.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>

Add a text inside the parent element and you will see that the line-height will strike again to define the line where the text is:

.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>

---

Some intresting questions:

Why is the span's line-height useless?

How does the vertical-align property work?

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

^{1: the calculation involve more than the line-height but we won't detail it here. More details here: https://stackoverflow.com/a/52285183/8620333}