Inline-block can't understand why 1 unit jumped up?

here is the code https://jsfiddle.net/10obye4z/
Please explain why the first block jumped.
I noticed that if something is inside it jumps,but I do not know why(
April 19th 20 at 12:38
2 answers
April 19th 20 at 12:40
Solution
Could Google this behavior...

Have display: inline-block; default is alignment on the baseline - vertical-align: baseline;

Therefore it is necessary to specify vertical-align: middle; or vertical-align: top; to blocks located in a single line.

Please explain why the first block jumped.


Jumps not only first, but also other, if you put them in the text, for example...
April 19th 20 at 12:42
vertical-align-middle; to your inline-block

Find more questions by tags CSS