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

问题描述：

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

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block的使用</title>
    <style>
        #container {
            width: 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;
            width: 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>