为什么带有字体真棒图标的span标签会受到垂直边距的影响？

Question

我一直都知道span标签不受以下因素的影响 垂直边距，因为它是行内元素。

但是，当使用包含字体真棒图标的跨度制作水平导航栏时，我发现我的字体真棒跨度正在响应垂直边距变化。除此之外，在包含常规跨度的div中更改字体效果跨度的垂直边距会影响所有跨度。

#regular {
  height: 100px;
  width: 100px;
  background-color: #8cff5f;
  float: left;
}

#regular span {
  margin-top: 100px;
}

#fontawesome {
  height: 100px;
  width: 100px;
  background-color: #5f9fff;
  float: left;
}

#fontawesome span{
  margin-top: 100px;
}

#multispan {
  margin-left: 100px;
  float: left;
  width: 250px;
  height: 100px;
  background-color: #c85fff;
}

#multispan span {
  margin-top: 100px;
}

#fontawesome-multispan {
  float: left;
  margin-top: 50px;
  width: 250px;
  height: 100px;
  background-color: #855fff;
}
.fas.fa-laptop {
  margin-top: 100px; /*Affects all spans? O_o*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div id="regular">
  <span>SPAN</span>
</div>


<div id="fontawesome">
  <span class="fas fa-user"></span>
</div>

<div id="multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
</div>

<div id="fontawesome-multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
  <span class="fas fa-laptop"></span>
</div>

这里是example，可以更好地说明我的经历。

有人知道为什么会这样吗？

Answer 1

首先，令人赞叹的字体跨度为inline-block，因此影响到它们的边距是合乎逻辑的，默认对齐方式是基线，这就是为什么其他跨度正在移动的原因。例如，将对齐方式放在最上面，它们就不会移动。

仅更改图标的对齐方式就足够了

#regular {
  height: 100px;
  width: 100px;
  background-color: #8cff5f;
  float: left;
}

#regular span {
  margin-top: 100px;
}

#fontawesome {
  height: 100px;
  width: 100px;
  background-color: #5f9fff;
  float: left;
}

#fontawesome span{
  margin-top: 100px;
}

#multispan {
  margin-left: 100px;
  float: left;
  width: 250px;
  height: 100px;
  background-color: #c85fff;
}

#multispan span {
  margin-top: 100px;
 vertical-align:top;
}

#fontawesome-multispan {
  float: left;
  margin-top: 50px;
  width: 250px;
  height: 100px;
  background-color: #855fff;
}
.fas.fa-laptop {
  margin-top: 100px; /*Affects all spans? O_o*/
 vertical-align:top;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div id="regular">
  <span>SPAN</span>
</div>


<div id="fontawesome">
  <span class="fas fa-user"></span>
</div>

<div id="multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
</div>

<div id="fontawesome-multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
  <span class="fas fa-laptop"></span>
</div>