Extra space appearing below DIV element

Brad Bansner
Brad Bansner used Ask the Experts™
On this page:

...I am seeing a small vertical space between the top row of buttons at the photo. It is a DIV with #nav1wrap

I cannot figure out why that space is appearing. Why would it not be flush with the photo below it?

Thank you.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
That's a side-effect from using "display:inline-block" (which is often so very useful). That space is being preserved for descending characters even though there are only white-space characters around that element. Give "vertical-align:top" to "#nav1" to correct that.
Brad BansnerWeb Developer


Indeed, that fixes it. Thank you!

I couldn't find a better way to center a <ul> element on the screen, without specifying a width. "display:inline-block" took care of it. "display:inline" didn't do the trick. Unless there is a better way that I'm not aware of.

Thanks again.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial