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

Question

我一直明白 span 标签不受 垂直边距，因为它是一个内联元素。

然而，在使用包含令人敬畏的字体图标的跨度制作水平导航栏时，我发现我的令人敬畏的字体跨度正在响应垂直边距的变化。除此之外，在包含常规 span 的 div 中更改 font-awesome span 的垂直边距会导致所有 span 受到影响。

#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>