CSS2 Test Suite: 10.8 line-height

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

p span {background-color: #DDD;}
.cl0 {font-size: 15px;}
.cl1 {line-height: -1em; font-size: 15px;}
.cl2 {line-height: 30px; font-size: 15px;}
.cl3 {line-height: 200%; font-size: 15px;}
.cl4 {line-height: 2; font-size: 15px;}
div {border: 1px dotted gray; background: white;
   margin: 0.5em; padding: 0.25em;}
.shrink {font-size: 66%;}
.grow {font-size: 150%;}
.cl5 {line-height: 1.2em; font-size: 15px;}
.cl6 {line-height: 1.2; font-size: 15px;}
.huge {font-size: 200%; border: 1px dotted red; background: none;}
.cl5 img {height: 30px;}

[cl0] A 'p' element with browser-default 'line-height'. Its 'font-size' has been set to 15px, the same as the other tests in this page. This element is included largely for reference purposes, and is not intended to demonstrate a particular aspect of the CSS specification. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl1] This 'p' element should have a normal line-height, because negative values are not permitted for 'line-height'. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, although the distance between actual character glyphs cannot be predicted. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, and a separation of 15 pixels between the silver-backed areas. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl3] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl4] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl3] This 'div' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[shrink] This text should have a font-size two-thirds that of the parent element, but the separation between baselines in this element should still be 30 pixels, as the value '200%' on the parent element causes a computed value to be inherited. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[grow] This text should have a font-size half again as large as that of the parent element, but the separation between baselines in this element should still be 30 pixels, as the value '200%' on the parent element causes a computed value to be inherited. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
This is the end of the 'cl3' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl4] This 'div' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[shrink] This text should have a font-size two-thirds that of the parent element, and the separation between baselines should also be two-thirds the parent; in other words, 20 pixels. This happens because the value '2' is inherited as a "scaling factor" that is multiplied by the value of the element's 'font-size' (in this case, 10px * 2). Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[grow] This text should have a font-size half again as large as that of the parent element, and the separation between baselines should also be half again that of the parent; in other words, 45 pixels. This happens because the value '2' is inherited as a "scaling factor" that is multiplied by the value of the element's 'font-size' (in this case, 22.5px * 2). Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
This is the end of the 'cl4' content. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.

[cl5] This 'p' element contains an inline element that is twice the size of the 'p' element's text, but it does not have an increased line-height. Thus, the inline element's content area will overlap other lines in the parent element. The inline element is [huge]. Note that the baselines of both the 'p' and the 'span' are aligned, since that's the default behavior. The overlap can go both upward and downward; that is, preceding and succeeding lines can be overlapped. The height of the line in which the 'span' appears may also be taller than normal due to the inline box of the 'span'.

[cl6] This 'p' element contains an inline element that is twice the size of the 'p' element's text, and which will inherit the scaling factor for its line-height. Thus, the inline element's content area will not overlap other lines in the parent element. The inline element is [huge]. Note that the line in which the inline element appears is increased in height to account for its presence. This does not increase the content area of the line of text, as the silver background demonstrates.

[cl5] This 'p' element contains an inline image that is twice the height of the 'p' element's text. Thus, the images will increase the height of the line in which it appears, and will not overlap content in lines above or below it. The inline element is test image. Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.

[index page] [section] [Previous] [Next] [Specification]