html – Hand emoji 👉Here👈 has extra space, how can I solve this with CSS elegantly?-ThrowExceptions

Exception or error:

enter image description here

p {
  font-size: 16px;
}
<p>
  <span>๐Ÿ‘‰</span>
  <span>Here</span>
  <span>๐Ÿ‘ˆ</span>
</p>

As you can see, the left emoji hand has extra empty space.

Currently, I add padding-left: 0; padding-right: 5px; to the center string.

But is there any other way or CSS property that can solve this?

enter image description here

My Browser is Chrome 80, there is actually a little extra space.

Although one line will remove space, but the problem still stands:

enter image description here

Using Pseudo class is not helping either, notice that there is still not line up

enter image description here

How to solve:

I did a lot of cheating but this seems to work

p {
  font-size: 16px;
  letter-spacing: -6px;
}
.letters{
  letter-spacing: 0.01em;
  padding-left: 0.35em;
}
<p>
  ๐Ÿ‘‰
  <span class="letters">Here</span>
  ๐Ÿ‘ˆ
</p>

###

The emojis are really just decoration, not content. Use psuedo elements and the problem is solved.

p {
  font-size: 16px;
}

p > span::before{
  content: '๐Ÿ‘‰';
}

p > span::after{
  content: '๐Ÿ‘ˆ';
}
<p>
  <span>Here</span>
</p>

###

This is because of the horizontal element๏ผˆspan๏ผ‰, not the emoji

set p element font-size: 0 or let all span tag in one line

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *