This page tests properties in CSS1 that influence spacing. The gridlines in the background are spaced at 20 pixel intervals.
This paragraph, which contains only one sentence, has zero width margin, padding and border and should therefore have no extra vertical space around it.
That is, the spacing between the last line of the first paragraph and the first line of the second paragraph should be the same as the space between the line within the two paragraphs.
This paragraph has a text indent of '20px'.
This paragraph has a text indent of '-20px'.
This paragraph has a text indent of '1em'.
This paragraph has a text indent of '10%'. Percentage values on 'text-indent' refer to the width of the parent element.
This paragraph has a given width ('10em') and zero margin. To resolve the conflict, 'margin-right' will be assigned 'auto' and the paragraph will be on the left side.
This paragraph has a given width ('10em') and 'margin-left' is set to 'auto'. Ths paragraph should therefore end up on the right side.
This paragraph has a given width ('10em') and 'margin-left' and 'margin-right' are 'auto'. The paragraph should therefore be centered (but the text inside it should not).
This paragraph has 'auto' values on 'width', 'margin-left' and 'margin-right'. The margins will therefore be assigned '0' and the element will fill the width of the parent element.
The 'line-height' property of this paragraph is set to "1.0". Letters with ascenders/decenders should therefore be very close to adjacent lines, if not touching.
The 'line-height' property of this paragraph is set to "100%". Letters with ascenders/decenders should therefore be very close to adjacent lines, if not touching.
The 'line-height' property of this paragraph is set to zero. All lines of the paragraph will therefore have the same baseline. Really hard to read.
The 'line-height' property of this paragraph is set to '2em'. Lines in this paragraph should therefore appear double-spaced. Also, half of the "leading" ('line-height' - 'font-size') should be added above the paragraph and half should be below the paragraph.
Therefore, the distance between the last line of the previous paragraph and the first line of this paragraph will be exactly the same as the distance between lines within the two paragraphs.
The 'line-height' property of this paragraph is set to '200%'. Lines in this paragraph should therefore appear double-spaced. Also, half of the "leading" ('line-height' - 'font-size') should be added above the paragraph and half should be below the paragraph.
Therefore, the distance between the last line of the previous paragraph and the first line of this paragraph will be exactly the same as the distance between lines within the two paragraphs.
This is a paragraph.
This is another paragraph. Due to a 'margin-top: -1em' value on this paragraph, the first line of this paragraph should have the same baseline as the last line of the paragraph above. Also, the left margin of this paragraph is different.
This is a paragraph.
This another paragraph. Due to a 'margin-bottom: -1em' value on the previous paragraph, the first line of this paragraph should have the same baseline as the last line of the paragraph above. Also, the left margin of this paragraph is different.
This is a paragraph.
Vertical margins ('margin-top' and 'margin-bottom') do not have any effect on inline elements. You should therefore not see anything special about this paragraph: its text should be homogeneous and the distance to the paragraph above should be normal.
Vertical margins should collapse. In all the examples below, there should be a 5px distance between the two lines.
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. All examples below should end up with a margin of 0 between the first and second lines.
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
Below this line, 4 boxes meet
Above this line, 4 boxes meet
On this page, a left and right margin of 5px is set on the BODY element. This paragraph should therefore start 5px from the edge of the left page and wrap 5px from the right edge. If the browser does not support justification, the distance to the right edge may be longer.
This paragraph has its own margin of 5px on both the left and right side. It should therefore be 10px narrower than the paragraph in 5.1. Again, lack of support for justification may bias the results and also means that I have to type longer lines to make sure there will be a few linebreaks in this paragraph.
This paragraph has its left/right margins set to 5px both on a CLASS selector and an ID selector. The ID selector has a higher specificity than the CLASS selector which will be overridden. The result is that the paragraph has the same width as the paragraph in 8.2.
This is the starting position of the paragraph. This test will use nested DIV elements to indent paragraphs.
20px narrower
and narrower
how narrow cat it get?
this is the innermost level
before we start going out again
blah
blah
we're back!