title: Why is there spacing between my elements? ... and other CSS questions
body: <p>I've created a fiddle that's almost what I'm looking for, but still unsure of a couple things:</p>
  
  <p><a href="http://jsfiddle.net/LrAd3/" rel="nofollow">http://jsfiddle.net/LrAd3/</a></p>
  
  <p>Here are the things I'm not understanding:</p>
  
  <ul>
  <li><p>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.)</p></li>
  <li><p>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.)</p></li>
  <li><p>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:</p></li>
  </ul>
  
  <p><code>vertical-align: top;</code></p>
  
  <p>directly on the image. (EDIT: I've found more info on this and I believe I'm using it correctly.)</p>
  
  <p>Thanks for taking a look. And any suggestions of improvements would be appreciated.</p>
  
  <p>EDIT: I believe all my questions are answered now.  Thanks for the help!</p>