Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com tests: line box heights

Block-level element's line-height setting minimum height of each inline box tests

The element below is spanned by a SPAN with a line height of 0. It should look perfectly normal since the line-height of a block-level specifies the minimum height of each inline box in that line.

  1. Content that should span at least two lines with a bit of luck (and a lot of blather, which always goes a way to ensuring that things occupy a lot of space). Content that should span at least two lines with a bit of luck (and a lot of blather, which always goes a way to ensuring that things occupy a lot of space).

    Spacer

  2. Some content
    Some content

    The two elements above should appear as one, since in the first example the minimum height of each inliine box is 20 pixels thanks to font-size: 1px; line-height: 20 on the DIV, which overrides the 1 pixel line-height on the SPAN.