vertical-align, images, margins and line-height
In the following test cases, six images (colored rectangles) having margin-bottom:10px are vertically positioned with the following values for vertical-align:
- top
- bottom
- baseline
- middle
- text-top
- text-bottom
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, ...
gQfxÈ
Sixth case, line-height: 0.5, without images
gQfxÈ
Notes:
- The vertical margins of 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 margin-bottom on the images is ignored when the vertical-align is baseline.
Related tests:
- 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 without margin-bottom on the images vertical-align, images and line-height,
- the same cases of this page, but with inline-blocks instead of images vertical-align, inline-blocks, margins and line-height,
- IE7-/Win line-height problem with inline images.
CSS tests home