html - 图标和填充

Question

bob i {font-size: 10px} 显示了一个整齐的水平 block ，名称标题对齐。当我将 bob i 的 font-size 增加到 30px 时，两个 spans 没有整齐地水平对齐了。图标不是那么大，为什么它会使 bob span block 爆炸？是否有可能让 bob i {font-size: 40px} 并保持所有内容整齐地水平对齐？

.joe span
{
    display: block;
    padding: 20px;
    text-align: left;
}
.pete
{
 width: 30%;
 float: left;
 background-color: green;
}
.bob
{
 width: 10%;
 float: left;
 background-color: blue;
}
.bob i {
  font-size: 30px;
  padding-left: 10%;
}

<div class="wrapper"><div class="joe"><span class="pete">Pete</span> 
<span class="bob">Bob<i class="icon">@</i></span>
</div></div>

Answer 1

只需更改这些类属性

.joe span {
    display: flex;
    align-items: center;
    padding: 20px;
}
.bob i {
  font-size: 40px;
  padding-left: 10%;
  line-height: 0;
}

.joe span {
    display: flex;
    align-items: center;
    padding: 20px;
}
.pete
{
 width: 30%;
 float: left;
 background-color: green;
}
.bob
{
 width: 10%;
 float: left;
 background-color: blue;
}
.bob i {
  font-size: 40px;
  padding-left: 10%;
  line-height: 0;
}

<div class="wrapper"><div class="joe"><span class="pete">Pete</span> 
<span class="bob">Bob<i class="icon">@</i></span>
</div></div>