Why is there spacing between my elements? ... and other CSS questions

Question

I've created a fiddle that's almost what I'm looking for, but still unsure of a couple things:

http://jsfiddle.net/LrAd3/

Here are the things I'm not understanding:

• I've specified both the image and the listbox to be 512px in height but they are very slightly different heights. (EDIT: I believe this is because images and listboxes have different box sizing techniques. Adjusting this seems to fix the problem.)

• Why is there a small gap between the image and the listbox? (EDIT: Because both the img and span are inline elements so spaces and newlines are significant.)

• I know vertical-align is important here but I can't find a good source to understand how it works. I know it is different for images vs tables vs other block elements, but does anyone have a reference with an explanation? For example, I tried wrapping the img and listbox with a div and setting 'vertical-align' to top there, but it didn't do anything until I set:

vertical-align: top;

directly on the image. (EDIT: I've found more info on this and I believe I'm using it correctly.)

Thanks for taking a look. And any suggestions of improvements would be appreciated.

EDIT: I believe all my questions are answered now. Thanks for the help!

Answer 1

Another solution (although AndyM's answer above is perfectly fine) to the white-space issue with the vertical align would be to set the containing div's font-size to 0px. This will eliminate white space between the inline elements. You will, of course, need to set a different (positive) font-size for the child elements.

Answer 2

For the small space between, it's because they are set to inline-block, as someone mentioned in the comments. If you remove the physical space in the HTML code, you'll be good. Alternatively, you can make them both display:block and float:left, but you'll need to use a clearfix after them.

The different height part is harder to find, but I tracked it down. The problem child here is the box-sizing attribute. div has a default value for this of content-box. select's default value is border-box. You'll need three values though, to cover all browsers.

This fixes it:

select {
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Working Fiddle

Screenshot: