Vertical alignment of the inline elements (form elements).
The inline elements are separated in 2 types: replaced and non-replaced. (In my opinion the images is 3rd one).
The form elements and images are the replaced inline elements and require different rules for styling.
Outer div has line-height 40px.
This span has line-height 40px, font-size:12px with the default font-family.
Relpaced elements don't work with line-height.
Nearest span has line-height 40px. (note:baseline)
Nearest span has line-height 40px. (note:baseline)
Button inside of the span that has line-height:40px. (note:baseline)
The line-height doesn't work with images. Image has height and can be marged from the top (unlike usual inline elements).
Image is like a big letter and use same baseline.
image inside of the span (note: baseline). I decreased img height="10" (font-size of the span - 2px: img borders).
Now I increased font-size for this span to the height of the image+2px - img borders (18px).
I used margin-top:20px for image. It moves the contents of span too.
Bad, but a solution: use vertical-align:top (%) for span to return back the text in the middle of the line.
The next img has vertical-align:middle
Everything as a previous example BUT !!! + EMPTY SPAN with line-height:40px;
(still does not work correct in IE).
The next img has vertical-align:middle+ This span has line-height:40px;
For IE7/FF the <button> and the <select> have vertical-align:middle.
This techique is not cross browser supported (as 80% all of them), but is a standard.
To make happy the IE6 (one extra statement) see next story Vertical 3
If we use forms and the tables inside of them, this problem is solved easy with the
vertical-align:middle, that works properly inside of the display:table-cell
but not with the display:block.
The line-height doesn't work with images. Image has height and can be marged from the top (unlike usual inline elements).
Image is like a big letter and use same baseline.