Search code examples
htmlcsshandlebars.js

Strange characters appear while using handlebars.js

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.

enter image description here

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;
}
<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>

Solution

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