Why does an inline or inline-block element is aligned to the bottom of a larger sibling when its vertical-align is default? [duplicate]

Question

I've been testing vertical-align a lot but there is one basic behavior that I dont understand:

HTML & CSS

 #container {
        margin:0;
        padding:0;
        width:80%;
        height:250px;
        background-color: bisque;
        border: solid blue 1px;
      
    }

    #inside_div { 
        display: inline-block;
        background-color: red;
        width:90px;
        height:200px;
        height:120px;
        outline:solid black 1px;
        font-size: 36px;
        vertical-align: bottom;
    }

    #inside_span {
        font-size:22px;
        outline:solid black 1px;
    }

<div id="container">
   <div id="inside_div">A</div>
   <span id="inside_span">A</span>
</div>

Why the hell is the span at the bottom ? The only vertical-align assigment I did is on the red div...

The box line is as tall as the div so :

1. The inside_div is aligned to the bottom of the box line (the box line is as tall as the inside_div) as specified by the CSS inside_div{vertical-align:bottom;}. That is fine.

2. Why is the span aligned to the bottom of the inside_div? I didn't "ask" him to do that... Why isn't just sitting at the top of the container witch would be the normal flow ?

3. If I change the CSS rule to inside_div{vertical-align:top;} the inside_span sits next to the inside_div but both tops are aligned. Why does the inside_span even "cares" about what is going on with the inside_div? There is no baseline involved because the inside_div is aligned to the top of the box line (witch is as tall as him). So what is the inside_span aligning to and why?

4. If there is no vertical-align rule for the inside_span, by default the value of it's vertical-align is baseline. But what is his baseline aligned to?

Hope I'm being clear...