Why is my span tag with a font-awesome icon affected by vertical margin?

Question

I had always understood that the span tag is NOT affected by vertical margins because it is an in-line element.

However, while making a horizontal navbar using spans that contained font-awesome icons I discovered that my font-awesome spans were responding to vertical margin changes. In addition to that, changing the vertical margin of a font-awesome span in a div that contains regular spans causes all spans to be affected.

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

Here's the example to better illustrate what I'm experiencing.

Does anyone know why this is happening?

You're applying a 100px margin to everything that matches rule .fas.fa-laptop. That's an inline-block element; the other spans, which are inline, come along for the ride. — Roddy of the Frozen Peas

Temani Afif Temani Afif · Accepted Answer · 2019-01-25T21:42:51

First the font-awesome spans are inline-block so it's logical to have a margin affecting them and the default alignment is baseline that's why the other span are moving. Make the alignment to be top for example and they won't move.

Changing the alignment of only the icon should be enough

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

Why is my span tag with a font-awesome icon affected by vertical margin?

1 Answers