Fixing unwanted top spacing in buttons

In this post, I will share two solutions on how to resolve unwanted top spacing in your button elements. This issue usually happens when you have a newline or word break inside the button text value. The image below illustrates this.

Solutions

We can fix this issue by adding a vertical-align property into the CSS or enclosing the buttons inside a flex container.

Using vertical-align

Using flex container

Conclusion

I hope this simple guide helps you in dealing with button spacing issues. I recommend that you search the Internet for other possible solutions as well.

Leave a Reply