Most (if not all) CSS frameworks use vertical padding to vertically center content within buttons. One of the challenges with this approach is maintaining a consistent button height while allowing for variable button content height.
For instance, if I have a save button with a font awesome save icon in it, the button height would change if I were to change the icon size to be larger than the font size.
I’m building a design system where the heights of inputs, buttons, and avatars will be consistent even if there are changes to the fonts or icons on the site.
This appears to be a perfect solution to my problem but I’m wondering why no frameworks or large sites (that I could find) have used this approach.
Are there potential problems with this? Are there more elegant solutions? I originally was setting the line-height to be the same as the button height but I read that the support for this is problematic in Firefox.
Viewing 1 post (of 1 total)
The forum ‘Other’ is closed to new topics and replies.