An image inside a box - Strict
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:
CSS tests home
