Certain characters cause buttons to display incorrectly in html specifically √

Question

I am working on an emoji panel and and I am having an issue where specific characters cause a button to display differently and I do not know the reason here is the code that shows the issue.

button {
    width: 50px;
    height: 50px;
}

<span>
    <button>😁</button>
    <button>√</button>
    <button>🔴</button>
    <button>√</button>
    <button>👑</button> 
</span>

The code causes the buttons that have the square root symbol to display a few pixels lower and I do not know why this is happening so I was wondering why. I have looked around to figure out the solution but I have not seen this specific issue so it is hopefully something simple that I am overlooking but I have been unable to figure it out.

---

This is an image showing what the buttons look like.

Answer 1

This is caused by the icons not having the same height.

Consider adding a line-height to the <button> to align them:

button {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

<span>
    <button>😁</button>
    <button>√</button>
    <button>🔴</button>
    <button>√</button>
    <button>👑</button> 
</span>