In each of the following rows there are 5 boxes (yellow background, red border.) In the first four an image is the only content of a box, with different vertical-align values: baseline, bottom, top, middle. The last box contains just text. Change font size to test with different heights of the boxes.
baseline | bottom | top | middle | just text | ||||||
---|---|---|---|---|---|---|---|---|---|---|
'normal' (white space between box and IMG tags) | pÈ |
|||||||||
NO white space between box and IMG tags | pÈ |
|||||||||
Container has hasLayout | pÈ |
|||||||||
IMG has display:block | pÈ |
|||||||||
IMG has display:block and container has hasLayout | pÈ |
|||||||||
Container has same height as IMG | pÈ |
|||||||||
IMG is inside a TD (with white space) |
| |||||||||
IMG is inside a TD (no white space) |
| |||||||||
IMG with display:block inside a TD |
| |||||||||
Container has display: table-cell | pÈ |
|||||||||
baseline | bottom | top | middle | just text |
Some tests with empty divs, for IE7-
empty (no white space) | with white space | with empty comment | |
---|---|---|---|
no hasLayout | |||
hasLayout |
Related tests: