John Pili

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.

Solution using vertical-align

Solution 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.

Originally published at https://johnpili.com on February 2, 2022.

--

--

John Pili

John Pili

I am currently working as a software development manager in Malaysia. I manage and help my team with technical software design and implementation.