CODEWITHSUNDEEP
htmlcss
Eli
Eli

Reputation: 63

Certain characters cause buttons to display incorrectly in html specifically √

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.

Upvotes: 3

Views: 39

Answers (1)

0stone0
0stone0

Reputation: 44122

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>

Upvotes: 5

Related Questions