RichInStyle.com tests: line box heights

Ineffectualness of line-height on replaced elements test

1. 

   If there is a lot of space above, the browser is in error.

Basic tests - Line box set by line height test

2. Some text here
   And some more here.
   Some text here
   And some more here.

   Although there are actually two elements above, it should not be apparent that this is so, since they should be on top of one another - they are both two lines high with font-size: 12px and line-height: 16px, and the second has margin-top: -32px.

   ---

3. Some text here
   And some more here.

   Some text here
   And some more here.

   Although there are actually two elements above, it should not be apparent that this is so, since they should be on top of one another (the same as the previous example, except using an H1 element instead).

   ---

4. Some text here
   And some more here.
   
   Some text here
   And some more here.
   There are two elements above; and it should be apparent as such (the blue text should be below the green) - although there is a margin-top: -100px on the lower element, because it is baseline-aligned, this won't work - see the diagram below:

    +---------+
    |iiiiiiiii|
    |iiiiiiiii|
    |iiiiiiiii|
    |iiiiiiiii|
    |iiiiiiiii|
    |iiiiiiiii|
    +---------+
    |iiiiiiiii| 
    |iiiiiiiii| 
    |iiiiiiiii| 
    |iiiiiiiii| 
    |---------|
    |---------|
   

   ---

5. Some text here
   And some more here.
   
   Some text here
   And some more here.
   Not so here - because the line height is 68 pixels and the image is 52 pixels, the baseline of the line would have to be more than 16 pixels to increase the height of the line beyond 68 pixels. Since font-size is 16 pixels, the baseline cannot be more than 16 pixels. Note that the later element in the document tree is the green one, so if it is lower, the line with the replaced element has the too great a height.

Zero line height test

Note: there should not be any conspicuously overlapping text below.

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

The above should appear as a single line of text. There should not be red visible (because since the line height is 0, so too is the height of the element).

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

The above should have a single line. The line should be (approximately) through the middle of the text.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.