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?

Html css
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

Previous: How thinkphp5 chained operations sql returns data of type float

Next: How does webpack4 package remove console?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu