The problem of adding text inside css DIV to move down

as shown in the figure, I added four sibling DIV of .numberItem to html. Styles are as follows:
,

.numberItem{
        width:60px;
        height:100px;
        border:solid ;
        display:inline-block;
        font-size:50px;
        text-align:center;
    }

,
where I added words to the first DIV:
,

         <div class="numberItem">5</div>
         <div class="numberItem"></div>
         <div class="numberItem"></div>
         <div class="numberItem"></div>

,

the resulting style is as follows:

.png

Why does it move down?

Mar.29,2022

first of all, we should pay attention to an attribute vertical-align: baseline;. When there is no definition, the default value of vertical-align is baseline;
the elements in the line will be aligned vertically according to vertical-align.
further, you need to know that the baseline of the empty div is at the bottom by default, and once you have the text, it is determined according to the baseline of the text.
and the baseline of the text

clipboard.png

:

clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e7dc68-45409.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e7dc68-45409.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?