Certain characters cause buttons to display incorrectly in html specifically √

user_17823889 0
Viewed 35

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.
This is an image showing what the buttons look like.

css html
1 Answers

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>

user_56255470
Related