Changing line height of an element without affecting it's surroundings

Changing line height of an element without affecting it's surroundings
0
#1

Hey everyone,

I am working on the calculator app project and as I set a line height to vertically center the buttons, the decimal point looks lower than the rest. Is there a way to change the line-height of one element in a set of inline elements without affecting surrounding elements or maybe some other way to achieve the same thing?

Also project feedback, please take a look and give me your valuable feedback.

Project link => https://codepen.io/afaisalsahar/full/RrEjEw

Thanks!

#2

If I might suggest a simpler solution…

If I understand you correctly, you want the “dot” of the decimal vertically centered. One simple solution would be to not use a decimal point but a middle dot, accessed in html with · or ·

#3

Thanks Kevin, that does get the job done!