vertical-align, images and line-height
In the following test cases, six images (colored rectangles) are vertically positioned with the following values for vertical-align:
First case, line-height: 2
Second case, line-height: normal
Third case, line-height: 0.5
Fourth case, line-height: 0.5, without text-top, text-bottom
Fifth case, line-height: 0.5, without top, bottom, ...
Sixth case, line-height: 0.5, without images
- The red and blue images (top and bottom vertical-align) should always touch the box horizontal borders.
- In IE6- all cases with images are rendered the same, i.e. the line-height is not honored (it is always rendered as 'normal'.) See IE Line-height / Replaced Element Bug, IE6-/Win line-height problem with images.
- In IE7 the above problem is partially fixed, but still occurs when the specified line-height is less than normal (cases 4, 5.)
- In IE7 the red and blue images are always positioned (relatively to the text) in the same place as in the case with line-height normal (case 2), i.e. they seem not to see a changed line-height (case 1.)
- In all IE7-/Win the green images (vertical-align: middle) are nicely in the vertical middle of the parent box. Unfortunately this is not what the specs say, sigh! (CSS2.1 10.8.1: middle = "Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent".) The difference is more noticeable with some font-family, see this same page vertical-align of images and line-height with different fonts.
- <length> and <percentage> values for vertical-align,
- vertical-align of tall images,
- an image in a box,
- an image in a box with different line heights,
- the same cases of this page, but with a margin-bottom on the images vertical-align, images, margins and line-height,
- the same cases of this page, but with inline-blocks instead of images vertical-align, inline-blocks and line-height,
- IE7-/Win line-height problem with inline images.
CSS tests home