给某个无内容的元素设置inline-block会导致该元素所在行的元素的位置不在同一水平线上

问题描述：

给某个【无内容】的元素设置inline-block会导致该元素所在行的元素的位置不在同一水平线上

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block的使用</title>
    <style>
        #container {
             300px;
            height: 200px;
            border: 1px solid #333;
            color: #eee;
        }

        #container > .theme {
            height: 50px;
            line-height: 50px;
            background-color: #00f;
        }
        
        .theme > .theme-icon {
            display: inline-block;
             15px;
            height: 50px;
            background-color: #ff0000;
            vertical-align: top;  /*本文采用方案，设置vertical-align属性*/
        }
    </style>
</head>
<body>
<div id="container">
    <div class="theme">
        <i class="theme-icon"></i>  /*设置为行内块状元素*/
        <span class="today-hot">今日推荐</span>
        <span class="more">更多</span>
    </div>

</div>
</body>
</html>

问题原因：

同一行的元素默认是底部对齐，即vertical-align:baseline
设置inline-block的元素内容为空时，该元素的基线为该元素margin-bottom线所在位置；

解决方案：

使用float进行定位；
给设置inline-block元素设置：vertical-align;
给无内容元素加点内容,比如空格；

给某个无内容的元素设置inline-block会导致该元素所在行的元素的位置不在同一水平线上

问题描述：

代码：

问题原因：

解决方案：

调整后效果：