图标和填充

Question

bob i {font-size: 10px}显示整齐的水平块，名称标题对齐。当我将font-size的{​​{1}}增加到bob i时，两个30px不再整齐地水平对齐。图标不是那么大，为什么它会让spans块爆炸？是否可以bob span并保持整齐地水平对齐？

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%;
}

Answer 1

只需更改这些类属性

即可

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;