[FIXED] How to understand the difference between vertical-align: -0.125em and vertical-align: middle?

Issue

I see the code vertical-align: -0.125em;, and think about what's the difference between it and vertical-align:middle?

Solution

vertical-align:middle means

Aligns the middle of the element with the baseline plus half the x-height of the parent

So you need to find the middle of your element, the baseline and half the x-height (defined by the ex unit).

Here is an example:

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  width:30px;
  height:30px;
  background:
    linear-gradient(black,black) center/100% 2px no-repeat,
    linear-gradient(red,red) 0 calc(50% + 0.5ex)/100% 1px no-repeat,
    yellow;
  vertical-align:middle;
}

<div class="box">
Some text j <span></span>
</div>

The green line is the basline, the black one on the span element is the middle. We offset the middle by half the x-height (the red line)

vertical-align: -0.125em is vertical-align: <length> means

Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

Here it's the basline of the element against the baseline of the parent considering an offset:

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(black,black) 0 18px/100% 2px no-repeat,
    linear-gradient(red,red) 0 calc(18px - 0.125em)/100% 1px no-repeat,
    yellow;
  vertical-align:-0.125em;
}

<div class="box">
Some text j <span>aq</span>
</div>

Note that in some cases the baseline is a bit tricky to find. For an empty element the baseline is the bottom of the element:

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
    yellow;
  vertical-align:-0.5em;
}

<div class="box">
Some text j <span></span>
</div>

It's also the bottom if the element is having overflow:hidden

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  overflow:hidden;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
    yellow;
  vertical-align:-0.5em;
}

<div class="box">
Some text j <span></span> <span>aq</span>
</div>

It's also the bottom if we deal with an image or SVG

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  overflow:hidden;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
    yellow;
  vertical-align:-0.5em;
}

.box > img {
  vertical-align:-0.5em;
}

<div class="box">
Some text j <span></span> <span>aq</span> <img src="https://picsum.photos/id/100/30/30" >
</div>

Note how the image is not aligned the same because em will consider the parent font-size 50px unlike the span elements that will consider their own font-size. Use px and they will align the same:

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  overflow:hidden;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 10px/100% 1px no-repeat,
    yellow;
  vertical-align:-10px;
}

.box > img {
  vertical-align:-10px;
}

<div class="box">
Some text j <span></span> <span>aq</span> <img src="https://picsum.photos/id/100/30/30" >
</div>

---

To conclude, there is no explicit relation between middle and -0.125em since both have different definition and don't use the same references. It may happen that both give the same alignment in some particular cases but it doesn't mean they are equivalent.

Answered By - Temani Afif

Answer Checked By - Timothy Miller (PHPFixing Admin)