Strange characters appear while using handlebars.js-CodePudding

I have noticed strange behaviour using handlebars file.

When I was trying to add 3 anchor tags next to each other in one div I got '-' characters between them. You can see it on image below.

footer image

I did not add them in the code and when I put each anchor tag inside separate div the characters disappear.

I am new in handlebars and I wonder what is the reason of that.

  .social-media {
    margin-bottom: 32px;
  }

  .social-media a {
    margin: 16px 15px;

  }

</style>

<div class='footer'>
  <div class='social-media'>
    <a href='https://www.facebook.com/'>
      <img alt='facebook' src='mailing/facebook.png' />
    </a>

    <a href='https://www.linkedin.com/company/'>
      <img alt='lnkedin' src='mailing/linkedin.png' />
    </a>

    <a href='https://www.instagram.com/'>
      <img alt='instagram' src='mailing/instagram.png' />
    </a>
  </div>
</div>

CodePudding user response：

Just add text-decoration: none; prop to your styling of anchors - it will remove this line.

This decoration (underline) appears on all links by default. text-decoration: none; CSS property removing this line.

.social-media {
  margin-bottom: 32px;
}

.social-media a {
  margin: 16px 15px;
  text-decoration: none; /* remove underline */
}

<div class='footer'>
  <div class='social-media'>
    <a href='https://www.facebook.com/'>
      <img alt='facebook' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>

    <a href='https://www.linkedin.com/company/'>
      <img alt='lnkedin' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>

    <a href='https://www.instagram.com/'>
      <img alt='instagram' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>
  </div>
</div>