JSFiddle - React, Tailwind, and code Playground

HTML

<h4>例1:两个inline-block元素,一个空的一个带文本</h4>
<div>
    <span class="inline1"></span>
    <span class="inline2 lineheight20">文本</span>
</div>
<br/>


<h4>例2:inline-block多行文本</h4>
<div class="lineheight20">
    <span class="inline1"></span>
    <span class="inline2">文本文本文本文本</span>
</div>
<br/>

<h4>例2:不包含文本的line box</h4>
line-height:40px
<div class="lineheight40">
    <span class="inline1"></span>
</div>
<br/>
line-height:20px
<div class="lineheight20">
    <span class="inline1"></span>
</div>
<br/>
line-height:10px
<div class="lineheight10">
    <span class="inline1"></span>
</div>

CSS

div {
    background-color: #000;
}
.lineheight20 {
    line-height: 20px;
}
.lineheight10 {
    line-height: 10px;
}
.lineheight40 {
    line-height: 40px;
}
span {
    display: inline-block;
}
.inline1 {
    width: 20px;
    height: 20px;
    background-color: #0ff;
}
.inline2 {
    color: #fff;
    width: 60px;
    height: 20px;
}