Wrong li offset in html

I’m trying to move down an element with id=”email-li” from my ul, but it doesn’t move down.
How can I fix it?
I have the next structure:

.contacts-info {
  width: 815px;
  max-height: 50px;
  text-align: center;
  margin: 50px auto 0px;
  display: inline-block;
}

li {
  display: inline-block;
  margin-left: 20px;
}

#email-li {
  margin-bottom: 20px;
}
<div class="contacts-info">
  <ul>
    <li><img src="assets/images/elaginDoorSmallLogo.svg"></li>
    <li id="email-li">E-mail:<br/>[email protected]</li>
    <li><img src="assets/images/pipe.svg"></li>
    <li>Hello1</li>
    <li><img src="assets/images/pipe.svg"></li>
  </ul>
</div>

Answer

You can use

#email-li {
  position: relative;
  top: 20px; /*set how you need*/
  margin-bottom: 20px;
}