How to make jQuery UI buttons shorter

I have been using jQuery and jQuery UI for a while now and they make it really easy to add fancy features and layout to a web app. However, one thing I didn't like was that the default appearance jQuery UI buttons is too tall for my taste. The jQuery buttons have lots of space above and below the button text, making them look square and blocky to me.

After playing around with it for a while I figured out how to adjust the height of jQuery UI buttons. Simply add the following to your CSS style sheet:

.ui-button-text-only .ui-button-text
{ padding-top: .1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: .2em; }

Just tweak the top and bottom padding until you like the way the buttons look. I had to make my bottom padding bigger than my top padding to make the button text look vertically centered.

I also had some buttons with little GIF images instead of text. jQuery had the images jammed up against the top of the button by default. To center the images I added this to my CSS stylesheet:

img {margin-bottom: -.25em;}

I could get away with just changing my img tag styles because these little GIFs were the only img tags on the whole page. If you have other img tags on your page you would need to give the button img tags their own class and apply this style to just that class.