Adjust span within link

Question

I own a button and within it I own a tag i with an icon of font-awesome and within the i one span with the text (without the span the icon was above and the text below).

What I need is a way to position this span 4px up, 'cause he’s got 20px from the top and only 16px far from the bottom. Padding and margim no effect on this span

li {
  list-style-type: none;
}


.button-entrar {
  color: black;
  display: inline-block;
  padding: .7rem 2rem;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1rem;
  border-radius: .3rem;
  transition: all 500ms ease;
  cursor: pointer;
  text-transform: uppercase;
  padding: .7rem 3rem;
  font-size: 1.2rem;
}

.button-entrar::before,
.button-entrar::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: black;
}

.button-entrar span::before,
.button-entrar span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: black;
}

.button-entrar:hover::before,
.button-entrar:hover::after {
  width: 100%;
}

.button-entrar:hover span::before,
.button-entrar:hover span::after {
  height: 100%;
}

.button-entrar::after {
  right: 0;
  bottom: 0;
  transition-duration: 0.4s;
}

.button-entrar span::after {
  right: 0;
  bottom: 0;
  transition-duration: 0.4s;
}

.button-entrar::before {
  left: 0;
  top: 0;
  transition-duration: 0.4s;
}

.button-entrar span::before {
  left: 0;
  top: 0;
  transition-duration: 0.4s;
}

.button-entrar:hover {
  color: black;
  transition: all 500ms ease;
}

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

<li class="nav-item">
            <a class="js-scroll button-entrar" href="#"><i class="fas fa-sign-in-alt"><span class="pl-4">Entrar</span></i></a>
</li>

---

EDIT

After applying position:relative in span, the edge of the Hover is coming out in it and not in the boot.

Answer 1

It works if you put one position: relative and a top: -2px:

.button-entrar span{
  position: relative;
  top: -2px;
}

Only in that case, you should move it only 2px (half the difference 4px, getting 18px up and 18px down).

span is an inline element. Move it using the properties left, right, top or bottom, he needs a position: relative|absolute|fixed. To apply margin or padding, he needs to be inline-block or block. But the best thing in this case is top (or bottom), why use margin or padding, will also move the icon aligned to it.

Matter of the Hover

How have you used the pseudos in <a> and may not use in span with position relative because otherwise the vertical lines of the Hover will be stuck inside the span, and also can not put in the i otherwise the icon will not be displayed, the only alternative I see is to create an empty span at the beginning of the link:

<li class="nav-item">
   <a class="js-scroll button-entrar" href="#">
      <span></span>
      <i class="fas fa-sign-in-alt">
         <span class="pl-4">Entrar</span>
      </i>
   </a>
</li>

And create the pseudos in that empty span:

.button-entrar > span::before,
.button-entrar > span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: black;
}

Note that the symbol > will only point to direct child span from link.

And also change the first answer code to:

.button-entrar i span{
  position: relative;
  top: -2px;
}

To point to the other span inside the i of the icon;