How do two inline block elements influence each other alignment

Question

If we have two elements next to each other with display as inline-block, the bigger block (in terms of height) is the one which appears to influence the position of the other one when vertical-align is set for either of two.

How does it actually work? How can we think of a line on which an element will reside and when the vertical align is changed, we may just think it’s moving with respect to that line. Somehow I’m unable to understand why the other element also appear to move.

I'll illustrate with some examples. So Going through this link (with which this question has been marked duplicate) I did understand the the first div sets the baseline of the inline-block. for e,g in the following code, gjpiy sets the baseline and the other two inline-block divs that follow after that reside above this line.

.first, .second{
    width: 100px;
    display: inline-block;
 }
 
 .first{
    height: 100px;
    background: red;
 }

 .second{
    height: 30px;
    background: yellow;
  }
  
  .simpleDiv{
   display: inline-block
  }

<div class="simpleDiv">gjpiy</div>
<div class="first"></div>

<div class="second"></div>

But my questions are different. Now here're my question:

1. If you change the vertical-align to the bigger div, all of the three blocks appear to move up.

   .first, .second{
       width: 100px;
       display: inline-block;
    }
    
    .first{
       height: 100px;
       background: red;
       vertical-align:top;
    }
   
    .second{
       height: 30px;
       background: yellow;
     }

   <div style="display: inline-block">gjpiy</div>
   <div class="first"></div>
   
   <div class="second"></div>

2. If you change the vertical-align of the second div (the smaller one) only that goes up.

.first, .second{
    width: 100px;
    display: inline-block;
 }
 
 .first{
    height: 100px;
    background: red;
 }

 .second{
    height: 30px;
    background: yellow;
    vertical-align:top;
  }

<div style="display:inline-block">gjpiy</div>
<div class="first"></div>

<div class="second"></div>

So this is what I mean by the bigger element seems to influence Can anyone please clarify?

Answer 1

This is not really an "answer" per se but does illustrate where you see spans with inline-block with and without content text (forced as  ) also come into play here. The first three all have content; the last two the same layout as 2/3 but no content text.

• This reference is useful: https://stackoverflow.com/a/17337172/125981
• For a visual as is this helps: Why does this inline-block element have content that is not vertically aligned
• Another: CSS - Display text at descent instead of baseline?

As does the specification reference from my comment here: (scroll down to the bottom of the section.) https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

MDN flow discusssion reference https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow Includes some links to the BLOCK and INLINE BLOCK also at the bottom.

body {
  text-align: center;
  border: 1px solid #00FFFF;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body * {
  line-height: 1em;
}

.block-me {
  display: inline-block;
  border: solid 1px #0000FF;
}

.first,
.second {
  width: 100px;
}

.first {
  height: 100px;
  background: red;
}

.second {
  height: 30px;
  background: yellow;
}

.block-meX.line-rules {
  width: 90vw;
  height: 1px;
  background-color: #FF00FF;
  vertical-align: baseline;
  text-align: center;
  border: solid 1px;
}

.block-meX.line-rules:nth-of-type(2) {
  width: 70vw;
  height: 1px;
  border-color: #00FF00;
  vertical-align: baseline;
  margin-top: -6em;
}

<div class="block-me">gjpiy</div>
<div class="block-me first">&nbsp;</div>
<div class="block-me second">&nbsp;</div>
<div class="block-me first"></div>
<div class="block-me second"></div>
<hr class="line-rules block-meX"></hr>
<hr class="line-rules block-meX"></hr>