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:

• top
• bottom
• baseline
• middle
• text-top
• text-bottom

First case, line-

gQfxÈ

Second case, line-normal

gQfxÈ

Third case, line-.5

gQfxÈ

Fourth case, line-.5, without text-top, text-bottom

gQfxÈ

Fifth case, line-.5, without top, bottom, ...

gQfxÈ

Sixth case, line-.5, without images

Notes:

• 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.

Related tests:

• <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

SEARCH:

Related searches:
height vertical egrave bottom normal

gipoco.com is neither affiliated with the authors of this page or responsible
for its contents. This is a safe-cache copy of the original web site.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.