Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com tests: inline non-replaced elements

Although this element has a blue border, it should not be visible except at the horizontal edges of the element and at the top and bottom only where there is no text (e.g., above where the line is wrapped at the top, and below where there is text on the last line) - it has padding: 1px, and border: 1px. The padding is the color of the background and is drawn just above and below the em square (i.e., the height implied by font-size). Since padding does not affect the size of the line box, the padding will cause the border to be invisible.

Although this element has a blue border, it should not be visible except at the horizontal edges of the element and at the bottom - it has padding: 1px, and border: 1px. The padding is the color of the background and is drawn just above and below the em square (i.e., the height implied by font-size). Since padding does not affect the size of the line box, the padding will cause the border to be invisible. It will not be visible at the top of the element because the justification makes the SPAN cover the whole width of the P.

The element below should appear as a solid block of color except for the bottom line, which reads 'You should be able to see this.'. This is due to a top padding of 12px, which is the same as the line height of the element, thereby hiding the line.

You should not be able to see this.
You should not be able to see this.
You should not be able to see this.
You should be able to see this.

The element below should appear the same as normal. This is due to a bottom padding of 12px (except on the last line), which although the same as the line height of the element, has no apparent effect because the text is rendered after the background.

You should be able to see this.
You should be able to see this.
You should be able to see this.
You should be able to see this.

And here's an un-inline-styled element, which should look exactly the same:

You should be able to see this.
You should be able to see this.
You should be able to see this.
You should be able to see this.

The example below has a green background on the SPANs (as in the first of this style of test) with padding-top. This means that the element should appear as a solid green block within a blue block, except for the last line, which should be visible.

You should not be able to see this.
You should not be able to see this.
You should not be able to see this.
You should be able to see this.

The example below has a green background on the SPANs with padding-bottom. This means that the element should appear with the top line having a red background and the other three having green backgrounds behind the text but with the red background to the right of that (i.e., where the text is not):

You should be able to see this.
You should be able to see this.
You should be able to see this.
You should be able to see this.

This test is extremely similar to the one with padding-bottom. However, in this one the the <br> element is included inside the SPAN, and the text is separately enclosed in an inner span with background: red. Since inline elements only have padding applied around their width, and since the <br> element gives the bottom of the SPANs zero width, no green should be visible.

You should be able to see this.
You should be able to see this.
You should be able to see this.
You should be able to see this.

Some text
Some text

The example above should have 'some text' with a black border above it (not the other way round) - the words some text should be obscured by the border.

Some text
Some text

The above example should not look normal, because although the SPAN has a (white) border and it is a border bottom, normally meaning the element below it will cover it up, the background is associated with the block - the inline content does not affect it.

Some text
Some text

The above element should appear as 'Some text' written once - not twice. This is due to the top border being white and therefore covering up the preceding 'Some text'.

The element below should look like a block of black with jagged right edges.

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

The element below should look like a block of black with jagged left edges.

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

The element below should look like a block of black with jagged edges on both sides.

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

The element below should look like a block of black, except on the last line.

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