Vertical-Align Aligns Everything Else Except Self

Vertical-align aligns everything else except self

Is this expected behavior, a bug, or something else?

Yes it's the expected behavior.

Why is it that after applying vertical-align only to the <span>,
everything else got vertically aligned except the <span> content

It's not exactly like that, vertical-align will specify the alignment of the elements and based on that the browser will render the output. So all your element are getting aligned and not only the text like you think.

Let's start by removing the alignment

p {  background: yellow}
span {  display: inline-block;  height: 50px;  background: pink;}

<p>    Hello <span>What in the</span> World?</p>

vertical-align: middle on inline-block not working as expected

The div is aligning itself with the baseline of the span. When you set vertical-align: baseline, you'll find the span now aligns itself with the baseline, too.

Vertical align middle is not working properly with two empty inline blocks aligned next to each other?

I'll try to answer your question, possibly it helps to others. In this case, the margin refers to the element itself, and therefore the recalculation is relative to the size of your element, including the margin

examples:
Sample Image

Sample Image

Vertically-aligned inline-block element not perfectly centered within container

vertical-align: middle; was never meant to center the element. Here is a more trivial example to better see:

p {  background:     linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */    red;  line-height: 80px;  font-size:80px;  display: block;}
span {  height: 18px;  width: 18px;  display: inline-block;  background: lightblue;  vertical-align: middle;}

<p>  <span></span>  <-- Not aligned</p>

Why does the sibling line-box gets aligned vertically whenever there is no space for the first line-box to be vertically aligned?

Now, if i apply 'vertical-align' to the second line-box, it moves without a problem, since there is plenty of space. However, obviously there is no space for the first line-box to move up or down, but when i apply vertical-align to it, the second line-box moves almost as if the vertical align properties applies to it.

Your missunderstanding is in the plenty of space or let's say space in general. Vertical align will not consider the space you have in mind but will create that space.

let's first understand the definition

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. ^ref

Then you can read the following rules:

The height of a line box is determined as follows:
The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
The line box height is the distance between the uppermost box top and the lowermost box bottom.

We first start by defining the height of each element and we consider the margin box then we place all the elements and only at end the line box height is defined (the spaces you are talking about).

In your first example, both element have a default baseline alignment

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

so both will get aligned by their text and logically the margin of any of them will push the other.

A better example with different fonts:

.container {
  border: 1px solid;
  background:linear-gradient(blue,blue) 0 78px/100% 2px no-repeat;
}

.first {
  display: inline-block;
  font-size: 30px;
  background-color: darkcyan;
  border: 1px solid;
  margin: 50px 0 0 0;
  opacity:0.5;
}

.second {
  display: inline-block;
  border: 1px solid;
  background-color: red;
  font-size: 50px;
  margin:0;
  opacity:0.5;
}

<div class="container">
  text outside

  <div class="first">Lorem ipsum</div>


  <p class="second">Lorem ipsum</p>

</div>

How to vertically align items with different sizes?

You can approximate this using baseline alignment and pseudo element. Change baseline with center in the below example to see that left/right will stay at the same place.

.container {  display: flex;  flex-flow: row;  align-items: baseline;  border: 1px solid black;  height:200px;  background:linear-gradient(red,red) center/100% 1px no-repeat}.container:before {  content:"";  height:calc(50% + 0.25em)}.container div {  margin: 10px;  padding: 10px;  border: 1px solid black;}
.container span {  display: block;}

<div class="container">  <div>left</div>  <div>center<span class="nested child">nested content</span></div>  <div>right</div></div>
<div class="container">  <div>left</div>  <div>center</div>  <div>right</div></div>

Vertical-Align Aligns Everything Else Except Self