The white-space Property

The white-space property specifies with the way the browser should handle whitespace.

The space character, the carriage return, the line feed character and the tab character are the whitespace characters that are affected by the white-space property. The following whitespace characters are not affected by the white-space property: non-breaking space ( ), em space ( ), en space ( ) and thin space ( ).

The white-space property can be applied to any element. It takes any one of the following values: normal, pre, nowrap, pre-wrap, pre-line, and inherit. The inital value is normal. white-space is an inherited property.

white-space:normal

This is the initial value of the property and therefore specifies the default whitespace handling of the browser.

By default, the browser handles whitespace characters found within an element (whose contents are displayed as text) in this way:

• Single or multiple space characters are displayed as a single space.
• Single or multiple tab characters are displayed as a single space.
• Single or multiple carriage return characters are displayed as a single space.
• Single or multiple line feed characters are displayed as a single space.
• Any combination of the above mentioned characters — space, tab, carriage return, and line feed, are displayed as a single space.
• The following whitespace character entities are displayed as many times as they appear in the element:  ,  ,   and  . That is, the browser does not reduce multiple instances of these character entities into a single space.
• Spaces in the text that would appear at the end and at the beginning of lines are not displayed.

The white-space:normal declaration is used to restore the default whitespace handling in an element when a different white-space declaration was either specified or inherited.

Example 1: <div style="font-family:'Times New Roman';font-size:35px;white-space:pre"><p style="white-space:normal">the five boxing wizards jump quickly the quick</p></div>

 

white-space:pre

This declaration causes the browser to "preserve" the whitespace in an element and to prevent automatic line wrapping. That is, with this declaration, all the whitespace characters are displayed as many times as they appear in the element and only carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>) cause the browser to start new lines.

Note: In Firefox 3, Firefox 3.5, Safari 4, Chrome 3 and Opera 10, with white-space:pre, every line that is displayed ends with either a carriage return character, a  line feed character or a carriage return - line feed pair. However in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, with white-space:pre, if the text in an element starts with a newline character or character sequence, the browser does not display the blank line. This is a bug.

Example 2: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre"> the five boxing <span>wizards jump</span> quickly<br> over </p>

 

white-space:nowrap

This declaration prevents the automatic wrapping of lines. However, line break tags (<br>) still create new lines. This declaration does not alter the way white space is handled.

Example 3: <p style="font-family:'Times New Roman';font-size:35px;white-space:nowrap"> the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

 

white-space:pre-wrap

This declaration causes the browser to "preserve" the whitespace in an element and, unlike white-space:pre, does not prevent automatic line wrapping. That is, with this declaration, all the whitespace characters are displayed as many times as they appear in the element, the browser automatically wraps lines, and carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>) cause the browser to start new lines.

Example 4: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre-wrap">the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

Note: Internet Explorer 6 and Internet Explorer 7 ignore the white-space:pre-wrap declaration.

white-space:pre-line

This declaration causes the browser to automatically wraps lines, and start new lines with carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>). Unlike white-space:pre however, space characters and tab characters are handled according to the browser's default whitespace handling rules.

Example 5: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre-line">the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

 

Note: Firefox 3, Internet Explorer 6 and Internet Explorer 7 ignore the white-space:pre-line declaration.

white-space inheritance

white-space is an inherited property, all descendants of an element inherit its white-space declaration.

Example 6: <div style="white-space:pre"><p style="font-family:'Times New Roman';font-size:35px"> the five boxing <span>wizards jump quickly</span> the quick</p></div>

white-space:inherit

This declaration is used to override another white-space declaration that is applied to an element and to restore the default behavior of inheriting the ancestor elements' white-space declaration.

Note: Internet Explorer 6 and Internet Explorer 7 ignore white-space:inherit declarations.

Concluding Notes

white-space:pre-wrap and white-space:inherit must be avoided because Internet Explorer 6 and Internet Explorer 7 ignore these declarations.

white-space:pre-line must be avoided because Firefox 3, Internet Explorer 6 and Internet Explorer 7 ignore it.

If the text in an element that has the declaration white-space:pre, starts with a newline character or character sequence, Internet Explorer 8 and below do not display the blank line. Therefore, elements that have white-space:pre should not start with a newline character or character sequence.

The text-shadow Property

This property specifies text shadows that appear with the text of an element.

The text-shadow property can be applied to any element. It is an inherited property (according to CSS 3). Its inital value is none. Its syntax is as follows:

text-shadow: color1 horizontal_offset1 vertical_offset1 blur_radius1, color2 horizontal_offset2 vertical_offset2 blur_radius2,...

The color value specifies the color of the shadow. The horizontal offset is a length value that specifies the distance to the left or right of the text that the shadow has to be rendered. A positive value renders the shadow text to the right, a negative value renders it to the left. The vertical offset is a length value that specifies the vertical distance from the text that the shadow has to be rendered. The blur radius, a length value, controls the blurriness of the shadow.

More than one shadow can be specified — each set of values are separated by a comma.

Note: text shadows have no effect on the size of the line box

Example: <p style="font-family:'Times New Roman';font-size:35px;text-shadow: green 15px 15px 0, gray -15px -15px 0">the five boxing wizards</p>

In the above example, the text has two shadows — one below and the other above. Firefox 3 and Internet Explorer 8 and below ignore the text-shadow property. Firefox 3.5, Safari 4, Chrome 3 and Opera 10 display the text shadows as shown in the picture.

Conclusion

Since the text-shadow property is ignored by Firefox 3 and Internet Explorer 8 and below, this property cannot be used.

The text-decoration Property

The text-decoration property produces the following text effects: underline, overline, line-through, and blink.

The text-decoration property can be applied to any element. It is not an inherited property. Its initial value is none. The following keywords can be its values: underline, overline, line-through, blink, none and inherit. The following keywords can be used together to combine their effects: underline, overline, line-through, and blink.

The text-decoration property does not affect the line-height of an element.

text-decoration:underline

The text-decoration:underline declaration produces a line under the text (and any spaces) of an element. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the thickness of the line depends on the font size of the element. In Internet Explorer 6 and Internet Explorer 7, the line is always one pixel thick. The line is drawn below the baseline.

In Firefox 3 and Firefox 3.5, if text-decoration:underline is applied to a <p> containing a span, the underline is covered by the span's background color or background image. However, if the span does not have a background-color or background-image specified, then the underline is visible. In Internet Explorer however, the underline is visible even when the span has a background color or image.

In Firefox 3 and Firefox 3.5, underlines are drawn below images too. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, underlines are not drawn below images.

Example 1: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:underline">the five boxing wizards @&Acirc;</p>

<

In the above example, the underline is 2px thick and at a height of 2px from the bottom of the content area. In Internet Explorer 6 and Internet Explorer 7, the underline is 1px thick and 3px from the bottom of the content area.

text-decoration:overline

The text-decoration:overline declaration produces a line above the text (and any space characters) of an element. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the thickness of the line depends on the font size of the element. In Internet Explorer 6 and Internet Explorer 7, the line is always one pixel thick. The line is drawn at the top of the content area.

In Firefox 3 and Firefox 3.5, if text-decoration:overline is applied to a <p> containing a span, the overline is covered by the span's background color or background image. However, if the span does not have a background color or background image specified, then the overline is visible. In Internet Explorer however, the overline is visible even when the span has a background color or image.

In Firefox 3 and Firefox 3.5, overlines are drawn above images too. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, overlines are not drawn above images. In Firefox 3 and Firefox 3.5, tall images may cover an overline.

Example 2: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:overline">the five boxing wizards @&Acirc;</p>

 

In the above example, the overline is 2px thick and is at the top of the content area. In Internet Explorer 6 and 7, the overline is 1px thick.

text-decoration:line-through

The text-decoration:line-through declaration produces a line through the middle of the text in an element. In Firefox 3, Firefox 3.5, Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the thickness of the line depends on the font size of the element. However, these browsers don't all draw a line of the same thickness for a give font size.

In Firefox 3 and Firefox 3.5, unlike for underline and overline, with line-through, the line is visible even through spans that have a background color or background image specified. In Internet Explorer 6, Internet Explorer 7 and in Internet Explorer 8, just like for underline and overline, the line is visible in spans that have a background color or image.

In Firefox 3 and Firefox 3.5, unlike for underline and overline, with line-through, the line is drawn over images. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the line is not drawn through images.

Example 3: <p style="font-family:'Times New Roman';font-size:35px;text-decoration:line-through">the five boxing wizards @&Acirc;</p>

 

In the above example, the line is 2px thick and at a height of 15px in Firefox 3, Firefox 3.5 and Internet Explorer 8. In Internet Explorer 6 and Internet Explorer 7, the line is 4px thick and at a height of 15px.

text-decoration:blink

The text-decoration:overline declaration causes the text of the element to blink. Firefox 3 and Firefox 3.5 support the blink feature, but not Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8.

In Firefox 3 and Firefox 3.5, only text blinks, not images.

Example 4: <p style="text-decoration:blink">the five boxing wizards @&Acirc;</p>

text-decoration and descendant elements

According to the w3.org CSS specification, text-decoration is not an inherited property. However, text-decoration overlines, underlines and line-throughs that are applied to an inline-level or block-level elements also appear over descendant elements.

The color of the text-decoration line depends on the value of the color property of the element that the text-decoration declaration was directly applied to, and the line remains the same color in descendant elements.

In Firefox 3 and Firefox 3.5, the thickness of the text-decoration line depends on the font size of the element that the text-decoration declaration was applied to. However, in Internet Explorer 8 thickness of the text-decoration underline and overline depends on the font-size of the tallest em box on the line in which the text-decoration line appears. However, the thickness of the line-through depends on the font-size of the text in which the line-through appears. In Internet Explorer 6 and Internet Explorer 7, the text-decoration underline and overline is always 1px thick, but the thickness of the line-through depends on the font size of the text in which the line-through appears.

In Firefox 3 and Firefox 3.5 the position of the text-decoration line is dependent on the font size of the element that the text-decoration declaration was applied to. In Internet Explorer 8 and below, the position of the text-decoration line is dependent on the tallest em box in the element.

Example 5: <p style="font-family:'Times New Roman';font-size:55px;color:black;text-decoration: line-through"><span style="font-size:25px;color:red">the five boxing wizards jump </span><span style="font-size:35px">quickly</span></p>

 

The picture above shows how the example code is rendered in Firefox 3 and Firefox 3.5. In those browsers, the line-through is at a height appropriate for 55px text even though the element does not contain a single glyph that is of 55px. The color of the line is black because the value of the color property for the <p> is black. The thickness of the line-through is based upon the font size of the <p>. In Internet Explorer 6 and Internet Explorer 7, and Internet Explorer 8 there are two separate line-throughs, one for each span and of different thickness, based on the font size of each span. The color of the line-through is black, based on the color declaration on the <p>.

text-decoration:inherit

The text-decoration:inherit declaration prevents the parent element's text-decoration declaration from having any effect on an element and causes the element to inherit the parent element's text-decoration declaration as its own.

Internet Explorer 6 and Internet Explorer 7 ignore the text-decoration:inherit declaration.

text-decoration:none

The initial value of text-decoration is none. Therefore, the declaration text-decoration:none is useful in overriding another text-decoration declaration that has been applied to an element.

Multiple text-decoration values in a declaration

The text-decoration property can have more than one of the following values: underline, overline, line-through, and blink. Each value is separated from the next by a space. When the property has more than one value, the effect of each value is combined.

Example 6: <p style="text-decoration:underline overline ">the five boxing wizards @&Acirc;</p>

In the above example, the text of the <p> will have both an underline and overline.

Concluding Notes

The text-decoration property should be used with caution on elements that have descendants. This is because the text decoration that was specified on the parent also appears in the descendants. In such a situation, there is no way to remove the text decoration from the descendant elements.

The text-decoration declaration should not be used on elements on that contain images because of differences in rendering between Firefox and Internet Explorer 8 and below.

text-decoration:blink is not supported in Internet Explorer 8 and below.

For consistent rendering in all browsers, one should avoid using text-decoration on an element that contains text of different font-sizes.

The text-transform Property

The text-transform property affects the capitalization or the case of the letters in an element. This property can transform all the letters in an element into capitals or into lowercase letters, or it can capitalize the first letter of every word.

The text-transform property can be applied to any element. Its values can be any one of these: uppercase, lowercase, capitalize, none, or inherit. The initial value is none.

text-transform:uppercase

The text-transform:uppercase declaration transforms all the letters in an element (and its descendants) to uppercase.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';text-transform:uppercase">the quick brown fox 123</p>

In the above example, though all the letters in the <p> are lowercase, the text-transform:uppercase declaration transforms all the letters to uppercase.

text-transform:lowercase

The text-transform:uppercase declaration transforms all the letters in an element (and its descendants) to lowercase.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-transform:lowercase">The QuicK brown FOX 123</p>

 

In the above example, though all the letters in the <p> are a mix of lowercase and uppercase, the text-transform:lowercase declaration transforms all the letters to lowercase.

text-transform:capitalize

The text-transform:capitalize declaration transforms the first letters of all the words in an element (and its descendants) to uppercase, that is, it capitalizes all the words.

Note: In Firefox 3 and Firefox 3.5 only the first letter of a hyphenated word is capitalized. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the first letter and the letter after the hyphen are capitalized.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';text-transform:capitalize">the quick-brown fox jumps over</p>

 

In the above example, the first letter of each word is capitalized.

text-transform:none

The text-transform:none declaration restores the default browser behavior of displaying letters in the same case as they are in the element. This declaration is useful to override another inherited text-transform declaration on an element. 

Example 4: <div style="text-transform:uppercase"><p style="font-size:35px;font-family:'Times New Roman';text-transform:none">The Quick Brown Fox Jumps</p></div>

In the above example, the text-transform:none declaration overrides the inherited text-transform:uppercase declaration inherited from the div. Therefore, the text in the <p> is not transformed to uppercase.

text-transform:inherit

text-transform:inherit is used to override another text-transform declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's text-transform declaration.

Internet Explorer 6 and Internet Explorer 7 do not support text-transform:inherit, they ignore the declaration.

Conclusion

The text-transform:inherit declaration should be avoided because Internet Explorer 6 and Internet Explorer 7 ignore it.

With the text-transform:capitalize declaration, Internet Explorer capitalizes the first letter and the letter after the hyphen in hyphenated words. However, Firefox 3 and Firefox 3.5 only capitalizes the first letter of hyphenated words. Therefore, text-transform:capitalize should not be used on elements that contain hyphenated words.

The text-align Property

The text-align property specifies the alignment of text and images within the content area of a line. It can align the em boxes of text (and image content boxes) to the left side of the line box or to the right side of the line box; it can center the string of em boxes (along with image content boxes) on the line, and it can justify text. To justify text, the word spacing is increased so that the beginning and ending of the text (or images) on each line is aligned to the left and right side.

The text-align property can be applied to block-level elements and table cells. It can take the keywords left, center, right, justify and inherit. It is an inherited property. In all major browsers for English, text is left-aligned by default.

Note: The text-align property cannot be directly applied to inline elements.

text-align:left

text-align:left on an element aligns the last em box's (or image box's) left edge to the left edge of the content area on each line, without changing the word spacing of the line. All the remaining em boxes (and image boxes) on the line are positioned with their left edge against the right edge of the previously positioned em box. Since text in English is already aligned to the left by default, in English web pages, text-align:left is only useful to override another text-align declaration on an element.

Example 1: <div style="text-align:right"><p class="test" style="text-align:left"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p></div>

In the above example, the text-align declaration on the <p> overrides the text-align declaration on the div and left-aligns the text in <p>.

text-align:right

text-align:right on an element aligns the last em box's (or image box's) right edge to the right edge of the content area on each line, without changing the word spacing of the line. All the remaining em boxes (and image boxes) on the line are positioned with their right edge against the left edge of the previously positioned em box.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-align:right"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p>

 

In the above example, the right edge of the last em box of each line is aligned to the right edge of the content area. The word spacing is not altered.

text-align:center

text-align:center adjusts the postion of the em boxes (and image boxes), without changing the word spacing, in such a way that the amount of space between the left edge of the first em box (or image box) and the left edge of the content area is equal to the amount of space between the right edge of the last em box (or image box) and the right edge of the content area.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';text-align:center"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p>

 

In the above example, the string of em boxes of each line is centered on the line with equal space to the left and the right.

text-align:justify

text-align:justify on an element aligns the first em box's (or image box's) left edge to the left edge of the content area and the last em box's (or image box's) right edge to the right edge of the content area on each line by equally increasing the word spacing of the text on the line (if necessary).

All major browsers justify text by increasing the word spacing, they do not alter the letter spacing.

All major browsers justify the text in an element only when the text (and images) span more than one line.

If an element has both a word-spacing length declaration and word-spacing:justify, then the browser ignores the word-spacing declaration and increases the word spacing (if necessary) in order to justify the text.

Note that the actual amount of additional word spacing between individual pairs of words (or images) may differ between browsers, but the sum of the added spacing is the same for a particular line of text, for a particular width of the content area.

Example 4: <p class="test" style="text-align:justify"><span>the</span> <span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump quickly.</p>

 

In the above example, the word spacing between words is increased such that there is no space between the left and right edges of the content area and the first and last em boxes (or image boxes) of each line.

text-align:inherit

text-align:inherit is used to override another text-align declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's text alignment.

Internet Explorer 6 and Internet Explorer 7 do not support text-align:inherit, they ignore the declaration.

Conclusion

The text-align:inherit declaration should be avoided because Internet Explorer 6 and Internet Explorer 7 ignore it.

All the other keywords of text-align are fully supported in all major browsers.

The letter-spacing Property

The letter-spacing property is used to adjust the space between letters. The letter-spacing property reduces or increases the width of the em boxes of letters. Note that this property does not change the distance between the em boxes, which is always zero.

The letter-spacing property can be applied to any element. It can take length values and the keywords normal and inherit. It is an inherited property. The initial values is normal. A length of 0 is equivalent to normal. Negative values are allowed; they reduce the width of em boxes.

Note 1: The em box is the box that a glyph occupies.

Note 2: The letter-spacing property does not take percentage values.

Note 3: When the letter-spacing property has a length value, the letter spacing of the text cannot be changed by the text-align property.

letter-spacing with px values

The number of px declared in the letter-spacing declaration is the number of extra pixels of width added to the em boxes it is applied to.

Example 1a): <p style="font-family:'Times New Roman';font-size: 35px"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

 

In the above example, there is no letter-spacing declaration, therefore the em boxes are of default width. The default em box sizes for the letter is "t" is 10px, "h" is 18px, and "e" is 15px.

Example 1b): <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: 10px"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

In the above example, the width of the em boxes of the <p> and its descendants have been increased by 10px. Therefore, the width of the em boxes are: "t" 20px, "h" 28px, and "e" 25px.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: -3px">the <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

In the above example, the letter-spacing value is negative. This results in the following em box widths: "t" 7px, "h" 15px, and "e" 12px.

letter-spacing with em values

When letter spacing is declared in em, the em value is multiplied with the font-size to give the number of pixels that are added to the width of the em boxes in the element.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: 0.5em"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span></p>

In the above example, the declared em value (0.5em) is multiplied with the font-size to give 17.5px (0.5 * 35). This is added to the width of the em box. This results in the following em box widths: "t" 28px, "h" 36px, and "e" 33px.

However, Internet Explorer 6 and Internet Explorer 7, calculate em letter-spacing declarations to a much smaller value due to a bug.

letter-spacing:normal

letter-spacing:normal restores the em box width to the default sizes. Since letter-spacing is an inherited property, the normal keyword can be used to restore the default letter spacing in an element that has inherited a modified letter spacing declaration.

letter-spacing:inherit

letter-spacing:inherit is used to override another letter-spacing declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's letter spacing.

Internet Explorer 6 and Internet Explorer 7 do not support letter-spacing:inherit, they ignore it.

Conclusion

For consistent results in all browsers, letter-spacing with em values should be avoided (Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly).

letter-spacing:inherit should also be avoided because Internet Explorer 6 and Internet Explorer 7 do not support it.

letter-spacing declarations in px are supported in all browsers and is therefore the recommended way of using the property.

The word-spacing Property

Updated: Nov 10, 2009

The word-spacing property is used to modify the width of certain whitespace characters. Therefore, it modifies the distance between the words (or images) in an element. In CSS, a word is considered to be a one or more (non-whitespace) glyphs with whitespace surrounding it. The word-spacing property does not specify the width of whitespace characters, it only specifies the amount of space to be added or removed from the default width.

The word-spacing property can be applied to any element. It can take length values and the keywords normal and inherit. It is an inherited property. The initial values is normal. A length of 0 is equivalent to normal. Negative values are allowed; they reduce the space between the words.

Note: The word-spacing property does not take percentage values

The width of the space character depends on the font family and font size.

The word-spacing property affects each space (U+0020), non-breaking space (U+00A0), and ideographic space (U+3000) left in the text after the white space processing rules have been applied. Source: http://www.w3.org/TR/CSS21/text.html#spacing-props

According to the specification, therefore, other white space characters such as  ,  , and   are not affected by the word-spacing property. However, Internet Explorer 6 and Internet Explorer 7, modify the word spacing of these characters also. This is a bug. Firefox 3 and Firefox 3.5 do not modify the width of the non-breaking space character  . This is a bug.

Note: Since the word-spacing property affects the width of certain whitespace characters, it not only affects the spacing of words, but also the space between images that are separated by those whitespace characters.

word-spacing with px values

The number of px declared in the word-spacing declaration is added to the normal width of the space character.

Example 1: <p style="font-family:'Times New Roman';font-size: 35px;word-spacing: 10px">the <span>quick</span> <span>brown</span></p>

In the above example, the default width of the space character is 9px. Therefore, the default space between words is 9px. However, since the word spacing is declared as 10px, 10px is added to the default spacing which results in word spacing of 19px.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;word-spacing: -20px">the <span>five quick</span> <span>boxing</span> wizards</p>

In the above example, the word-spacing value is negative. Since the default width of the space character is 9px, the final word spacing is 9px -20px = -11px. Therefore, the beginning and ends of words will overlap each other.

Firefox 3 and Firefox 3.5 do not reduce the word spacing between two inline elements (e.g. spans) to less than zero. This is a bug. Internet Explorer 8 does not reduce the word spacing to less than zero. This is a bug.

word-spacing with em values

When word spacing is declared in em, the em value is multiplied with the font-size to give the number of pixels that is added to the width of the space character in the element.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;word-spacing: 1.5em">the <span>fox</span> <span>on</span></p>

In the above example, the declared em value (1.5em) is multiplied with the font-size to give 52.5px (1.5 * 35). This is added to the width of the space character to give 61.5px which rounds off to 62px. However, Firefox 3 and Firefox 3.5, due to a rounding off error, increase the word spacing to only 61px. Internet Explorer 8 increases the word spacing to 62px. Internet Explorer 6 and Internet Explorer 7 increases the word spacing to only 33px. This is a bug.

word-spacing:normal restores the word spacing to the default width of the space character. Since word-spacing is an inherited property, the normal keyword can be used to restore the default word spacing in an element that has inherited a modified word spacing declaration.

word-spacing:inherit

word-spacing:inherit is used to override another word-spacing declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's word spacing.

Internet Explorer 6 and Internet Explorer 7 do not support word-spacing:inherit, they ignore it.

Conclusion

For consistent results in all browsers, word-spacing with em values should be avoided (Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly).

word-spacing:inherit should also be avoided because Internet Explorer 6 and Internet Explorer 7 do not support it.

word-spacing declarations that result in negative word spacing should be avoided because they are not supported by Internet Explorer 8. Also, in Firefox 3 and Firefox 3.5, if an element with negative word spacing contains child inline elements, the word spacing between them is not reduced to less than zero. This is a bug.

Using the word-spacing declaration on elements that contain the character entities  ,  ,  , and   is not recommended because of bugs in Internet Explorer 6, Internet Explorer 7, Firefox 3 and Firefox 3.5 (as mentioned earlier).

Apart from the exceptions mentioned above, word-spacing declarations in px that result in positive word spacing are supported in all browsers and is therefore the recommended way of using the property.

The text-indent Property

Made minor corrections: Nov 04, 2009

The text-indent property is used to indent the first line of a block-level element. Adding or removing space from the beginning of a line is called indentation.

The text-indent property can be applied to block-level elements only. It can accept length values, percentage values and the keyword inherit. Percentage values refer to the width of the parent block-level element. Em values refer the font size of the element to which the text-indent property is applied. Negative values are allowed, these result in space being removed from the beginning of a line. The text-indent property is inherited by child block-level elements.

Note 1: When the text-indent declaration has a percentage value, the declared percentage value is inherited by child block elements. However, in Internet Explorer 6 and 7 and in Opera 10, the computed value is inherited.

Note 2: When the text-indent declaration has an em value, in Firefox 3, Firefox 3.5, Opera 10, Safari 4 and Chrome 3 the computed value is inherited by child block elements. However, Internet Explorer 6, 7, and 8, the declared em value is inherited by child block elements.

text-indent with px values

Example 1: <p style="font-size:35px;font-family:'Times New Roman';text-indent: 20px">The @&Acirc; The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly</p>

In the above example, the first line is indented by 20px. Subsequent lines are not indented.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-indent:-20px">the quick brown @&Acirc; fox jumps over the lazy dog. The five boxing wizards jump quickly</p>

In the above example, the first line of the <p> has a negative indent. This is called a hanging indent. A negative value to text-indent causes the beginning of the line to hang out of the line box. Note that since the text is outside the line box, it does not have the background image of the <p> behind it. Also, unless the <p> has margin + padding to the left of it that is at least equal to the amount of negative indentation, some part of the text will fall out of the viewport and will not be visible.

text-indent with percentage values

When the text-indent property has a percentage value, the amount of indentation is calculated by multiplying the percentage with the width of the parent block element. Every block-level element that can be displayed has the body element as the ancestor. Therefore, if no other parent element exists, then the percentage is calculated with respect to the width of the body element. The width of the body element can be its CSS declared width or, if it has no width declared, the width of the browser window. When the amount of indentation is dependent on the width of the browser window, the indentation changes each time the user changes the width of the browser window.

Example 3: <div style="width:450px"><p style="font-size:35px;font-family:'Times New Roman';text-indent: 4.5%">The @&Acirc; The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly</p></div>

In the above example, the width of the parent block-level element is 450px. Therefore the amount of indentation is 20px (4.5% of 450px = 20.25px, rounded to 20px). Therefore, the line should look exactly like the one in Example 1. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the line is indented 20px and looks exactly like the line in Example 1. However, in Internet Explorer 6 and in Internet Explorer 7, the line is indented 34px. Therefore, Internet Explorer 6's and Internet Explorer 7's implementation of text-indent with percentage values is buggy.

text-indent with em values

When the text-indent property has an em value, the amount of indentation is calculated by multiplying the em value with the font size of the element that the text-indent property has been applied to.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';text-indent:0.57em">The @&Acirc; The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly</p>

In the above example, the font size of the <p> is 35px and the text-indent declaration has a value of 0.57em. This is computed to 20px (0.57 * 35 = 19.95px, rounded to 20px). Therefore, the above line will look exactly the same as the line in Example 1.

text-indent:inherit

text-indent:inherit is used to override another text-indent declaration that has been applied to an element. If an ancestor element has a percentage text-indent declaration, then in Firefox 3, Firefox 3.5 and Internet Explorer 8 the descendant element inherits the percentage value. If an ancestor element has an emtext-indent declaration, then in Firefox 3 and Firefox 3.5, the computed value is inherited by the descendant element. However, in Internet Explorer 8, the em value in inherited. If an ancestor element has a pxtext-indent declaration, then the px value is inherited by the descendant element in Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8.

Note: Internet Explorer 6 sometimes ignores the text-indent:inherit declaration

Conclusion

Percentage values with text-indent must be avoided because Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly, also in these browsers descendant elements inherit computed values whereas Firefox 3, Firefox 3.5 and Internet Explorer 8 inherit the percentage values. This may result in inconsistent rendering across different browsers.

em values with text-indent must be avoided because in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, descendant elements inherit the declared em value whereas Firefox 3 and Firefox 3.5 inherit the computed values. This may result in inconsistent rendering across different browsers.

Therefore, for consistent results across browsers, text-indent with px values should be used.

The vertical-align property

The CSS property vertical-align is used to alter the vertical position of inline and replaced elements (it has no effect on block elements). With this property, various parts of inline and replaced elements can be aligned to various parts of the line box. For example, the top of an image can be aligned to the top of the parent element's content box.

The vertical-align property's values can either be keywords, percentages or length values. It is not an inherited property. It has the initial value baseline.

Note: The ascent is the distance between the baseline and the top of the content box. The descent is the distance between the baseline and the bottom of the content box. The size of the leading of a text line box can be obtained by subtracting the height of the line box from the height of the content box. The leading can be either positive (extra space above and below the content box) or negative (the line box cuts off some space from the top and bottom of the content box). The top half-leading and the bottom half-leading is the amount of space (added or removed) above and below the content box, respectively.

Keywords

These are the keywords that can be used with the vertical-align property: baseline, top, text-top, bottom, text-bottom, middle,super, sub and inherit.

vertical-align:baseline

This is the initial, default value of vertical-align. Therefore vertical-align:baseline is only used to override another vertical-align declaration that was applied to an element.

Example: <p>the quick brown <em class="raised" style="vertical-align:baseline">fox</em></p>

vertical-align:top

The declaration vertical-align:top aligns the top of an element's line box to the top of its parent element's line box.

Example 1a: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<span style="line-height: 59px">@Â five</span></p>

In the above example, the line box of the span has a height of 59px and the line box of the <p> expands to accommodate the span line box. However, without the span, the <p> line box would have a height of only 40px.

Example 1b: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<span style="vertical-align:top;line-height: 59px">@Â five</span></p>

In the above example, the vertical-align:top declaration causes the top of the span line box to be aligned to the top of the <p> line box. However, in Internet Explorer 6 and Internet Explorer 7 the vertical-align:top declaration has no effect. This is a bug.

Example 2: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<img style="vertical-align:top" src="20x50.jpg" alt="20x50 image" /></p>

In the above example, the vertical-align:top declaration causes the top of the image to be aligned to the top of the <p> line box.

The vertical-align:top declaration has an effect only in the following cases:

• vertical-align:top on an inline non-replaced element whose ascent + top half-leading is different from its parent's. The ascent + top half-leading of the inline non-replaced element could be different from the parent element's because
  • a line-height declaration on it, or an inherited raw number line-height declaration, caused it to have a top half-leading that is not equal its parent (with all other CSS text and line box properties being the same as the parent's)
  • it is of different font size (with all other CSS text and line box properties being the same as the parent's)
  • it uses a different font whose ascent is different from its parent's (with all other CSS text and line box properties being the same as the parent's)
  • it contains an element (replaced or non-replaced) that has increased the top half-leading (with all other CSS text and line box properties being the same as the parent's)
• vertical-align:top on an inline non-replaced element whose parent contains an element (replaced or non-replaced) which increased the top half leading of its (the parent's) line box (with all other CSS text and line box properties being the same)
• vertical-align:top on an inline replaced element (e.g. an image) whose height is not equal to the ascent of the text of the element it is contained in (with all other CSS text and line box properties being the same as the parent's)
  Note: A line height declaration on an image has no effect on its line box

In all other cases, the top of an element's line box is already aligned with the top of its parent's line box and so, vertical-align:top has no effect.

Note 1: For the parent element, the ascent + top half-leading value that is considered is the one measured when it does not contain the inline element to which the vertical-align declaration is applied.

Note 2: The ascent + top half-leading is measured from the baseline to the top of an element's line box.

vertical-align:bottom

The declaration vertical-align:bottom aligns the bottom of an element's line box to the bottom of its parent element's line box.

Example 3: <p style="font-size: 35px;font-family:'Times New Roman'">the @Â<span style="vertical-align:bottom;line-height: 21px">@Â five</span></p>

In the above example, the span's descent + bottom half-leading is reduced. Therefore, its bottom is not aligned to the bottom of the <p>'s line box which is of normal line height. The vertical-align:bottom declaration on the span causes its line box to be lowered so that its bottom is aligned to the bottom of the <p> line box.

However, in Internet Explorer 6 and Internet Explorer 7, the vertical-align:bottom declaration on the span in the example does not have any effect. This is a bug.

On replaced elements, vertical-align:bottom, causes the bottom of the replaced element's box to align with the bottom of the parent element's line box.

The vertical-align:bottom declaration has an effect only in the following cases:

• vertical-align:bottom on an inline non-replaced element whose descent + bottom half-leading is different from its parent's. The descent + bottom half-leading of the inline non-replaced element could be different from its parent's because:
  • a line-height declaration on it, or an inherited raw number line-height declaration, caused it to have a bottom half-leading that is not equal to its parent (with all other CSS text and line box properties being the same as the parent's)
  • it is of different font size (with all other CSS text and line box properties being the same as the parent's)
  • it uses a different font whose descent is different from its parent's (with all other CSS text and line box properties being the same as the parent's)
  • it contains an element (replaced or non-replaced) that has increased bottom half-leading (with all other CSS text and line box properties being the same as the parent's)
• vertical-align:bottom on an inline non-replaced element whose parent contains an element (replaced or non-replaced) which increased the bottom half-leading of its (the parent's) line box (with all other CSS text and line box properties being the same)
• vertical-align:bottom on an inline replaced element (e.g. an image) (with all other CSS text and line box properties being the same as the parent's)
  Note: A line height declaration on an image has no effect on its line box.

In all other cases, the bottom of an element's line box is already aligned with the bottom of its parent's line box and so, vertical-align:bottom has no effect.

Note 1: For the parent element, the descent + bottom half-leading that is considered is the one measured when it does not contain the inline element to which the vertical-align declaration is applied.

Note 2: The descent + bottom half-leading is measured from the baseline to the bottom of the element's line box.

vertical-align:text-top

The vertical-align:text-top declaration aligns the top of an element's line box to the top of its parent element's content box.

The top of an element's content box is also the top of the text and is therefore known as the text-top.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';line-height:60px">the @Â<span style="vertical-align:text-top">@Â five</span></p>

In the above example, the declared line height on the <p> is 60px. The inline span inherits this line height. The top of the span's line box is by default aligned to the top of the <p> line box. Therefore, the vertical-align: text-top declaration on the span causes the line box to move down 10px so that its top is aligned to the the text-top of the <p>.

Since the span line box has moved down 10px and its height is 60px, the <p>'s line box height has to be increased to 70px to accommodate it.

Note 1: In the above example, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the vertical-align: text-top declaration on the span has no effect. This is a bug.

Note 2: In the above example, if the line height of the <p> had been decreased, then the span line box would have moved up. This is because the span line box's height is reduced (invisibly) and the text-top of the <p> falls out of the line box.

When vertical-align:text-top is applied to a replaced element (e.g. an image), the top of the image gets aligned to the text-top of its parent.

When an inline non-replaced element and its parent have the same CSS text and line box properties and normal line height, the top of the inline element's line box coincides with the text-top of its parent element's line box. In such a case, vertical-align:text-top has no effect.

The vertical-align:text-top declaration has an effect only in the following cases:

• When the top of the line box of an inline element is not in alignment with the top of the content box of its parent. This occurs in the following cases:
  • When the line height of the inline element is increased or decreased (with all other CSS text and line box properties being the same as the parent's).
    Note that the line height of an inline element can be increased or decreased either directly (by a line-height declaration that matches the inline element) or indirectly (inherited from its parent)
  • When the inline element is of different font size (with all other CSS text and line box properties being the same as the parent's)
  • When the inline element uses a different font whose ascent is not equal to the parent element's ascent (with all other CSS text and line box properties being the same as the parent's)
  • When the inline element contains an element (replaced or non-replaced) that has increased the top half-leading such that the inline element's ascent + top half-leading is not equal to the parent element's ascent (with all other CSS text and line box properties being the same)
• vertical-align:text-top on an inline replaced element (e.g. an image) whose height is not equal to its parent's ascent (with all other CSS text and line box properties being the same as the parent's)
  Note: A line height declaration on an image has no effect on its line box.

In all other cases, the top of an element's line box is already aligned with the text-top of its parent and so, vertical-align:text-top has no effect.

vertical-align:text-bottom

The vertical-align:text-bottom declaration aligns the bottom of an element's line box to the bottom of its parent element's content box.

The bottom of an element's content box is also the bottom of the text and is therefore known as the text-bottom.

Example 5: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<span style="vertical-align:text-bottom;line-height: 59px">@Â five</span></p>

In the above example, the declared line height on the span is 59px. Therefore the span's line box height is increased to 59px. The height of the content box of the span is 40px. In Firefox 3.5, the top half-leading is 9px and the bottom half-leading is 10px. This gives the line box a height of 59px.

Since the bottom half-leading is 10px, this is the gap between the bottom of the span's line box and the text-bottom of the <p>. Therefore the vertical-align:text-bottom declaration moves the span line box up by 10px (with respect to the <p>) so that the span line box bottom is aligned with the text-bottom of the <p>.

Note 1: In the above example, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the vertical-align:text-bottom declaration on the span has no effect. This is a bug.

Note 2: In the above example if the line height of the span had been decreased, then the span line box would have moved down. This is because the span line box's height is reduced invisibly causing the bottom of the line box to be within the content box.

When vertical-align:text-bottom is applied to a replaced element (e.g. an image), the bottom of the image gets aligned to the text-bottom of its parent.

When an inline non-replaced element and its parent have the same CSS text and line box properties and normal line height, the bottom of the inline element's line box coincides with the text-bottom of its parent element's line box. In such a case, vertical-align:text-bottom has no effect.

The vertical-align:text-bottom declaration has an effect only in the following cases:

• When the bottom of the line box of an inline element is not in alignment with the bottom of the content box of its parent. This occurs in the following cases:
  • When the line height of the inline element is increased or decreased (with all other CSS text and line box properties being the same as the parent's).
    Note that the line height of an inline element can be increased or decreased either directly (by a line-height declaration that matches the inline element) or indirectly (inherited from its parent)
  • When the inline element is of different font size (with all other CSS text and line box properties being the same as the parent's)
  • When the inline element uses a different font whose descent is not equal to the parent element's descent (with all other CSS text and line box properties being the same as the parent's)
  • When the inline element contains an element (replaced or non-replaced) that has increased the bottom half-leading such that the inline element's descent + bottom half-leading is not equal to the parent element's descent (with all other CSS text and line box properties being the same)
• vertical-align:text-bottom on an inline replaced element (e.g. an image)(with all other CSS text and line box properties being the same as the parent's)
  Note: A line height declaration on an image has no effect on its line box.

In all other cases, the bottom of an element's line box is already aligned with the text-bottom of its parent and so, vertical-align:text-bottom has no effect.

vertical-align:middle

The vertical-align:middle declaration aligns the vertical middle of an element's line box to the height of the parent's baseline (the descent) plus 0.5ex (of the parent).

Example 6: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<img style="vertical-align:middle" src="20x50.jpg" alt="20x50 image" /></p>

In the above example, the <p> content box x-height is 16px, therefore 0.5ex is 8px. The baseline height is 8px. The image's height is 50px, therefore the vertical middle of the image will be at 25px (measuring from the bottom). The vertical-align:middle declaration on the image will therefore align the 25px point on the image to the 32px (16px + 8px) mark. This is true for Firefox 3, Firefox 3.5, Internet Explorer 8, Safari 4 and Chrome 3.

Opera 10 calculates 1ex as 0.5em. In the above example, font size is 35px = 1em, 1ex = 17.5px, 0.5ex = 8.75px. Therefore, the 24px point on the image is aligned to the 17px mark on the <p> content box.

Internet Explorer 6 and 7 also calculate 0.5ex as 8.75px in the above example. In these browsers, the 24px point on the image is aligned to the 19px point on the <p> content box.

vertical-align:super

The vertical-align:super declaration raises the position of the line box of an inline (replaced or non-replaced) element to give it the appearance of a superscript. It does not change the font size or any other property.

The official CSS specification does not specify by how much vertical-align:super should raise an inline element. Because of this, depending on the browser, the number of pixels by which vertical-align:super raises an inline element varies.

In a particular browser, the number of pixels that vertical-align:super raises an inline element depends on the font size of the parent element. It is not affected by the line height of the parent element or any properties of the inline element. The number of pixels the inline element is raised by is measured from the baseline of the content box of the parent element.

Example 7: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<span style="vertical-align:super">@Â five</span></p>

In the above example, the span line box is raised by 16px in Firefox 3, Firefox 3.5, Interenet Explorer 8 and Opera 10. Internet Explorer 6 and 7 raise it by 20px. Safari and Chrome 3 raise it by 12px. The <p> line box expands to accommodate the raised line box.

vertical-align:sub

The vertical-align:sub declaration lowers the position of the line box of an inline (replaced or non-replaced) element to give it the appearance of a subscript. It does not change the font size or any other property.

The official CSS specification does not specify by how much vertical-align:sub should lower an inline element. Because of this, depending on the browser, the number of pixels by which vertical-align:sub lowers an inline element varies.

In a particular browser, the number of pixels that vertical-align:sub lowers an inline element depends on the font size of the parent element. It is not affected by the line height of the parent element or any properties of the inline element. The number of pixels the inline element is lowered by is measured from the baseline of the content box of the parent element.

Example 8: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<span style="vertical-align:sub">@Â five</span></p>

In the above example, the span line box is lowered by 5px in Firefox 3 and Firefox 3.5, by 4px in Interent Explorer 8, by 16px in Opera 10, by 20px in Internet Explorer 6 and Internet Explorer 7 and by 8px in Safari 4 and Chrome 3.

vertical-align:inherit

vertical-align is not an inherited property. However, an element can be made to inherit its parent element's vertical-align value using the declaration vertical-align:inherit. This declaration causes an element to inherit the computed value of vertical-align of its parent element.

Example 12: <p class="test">the @&Acirc;<span style="vertical-align:0.5em">@&Acirc; five<span style="vertical-align:inherit;font-size:20px">@&Acirc; boxing</span></span></p>

In the above example, the child span (to the <p>) is raised by 18px (35px * 0.5 = 17.5px, rounded to 18px). The grand child span has a 3px gap between the bottom of its line box and the bottom of the parent span line box.

When vertical-align:inherit is applied to the grand child span, it inherits the computed value of vertical-align from its parent (17.5px). Therefore, the grand child span's line box's bottom will be 21px (17.5px + 3px = 20.5px, rounded to 21px) above the bottom of its parent's line box. In other words, the grand child span's line box will be raised by 18px.

In Firefox 3 and Firefox 3.5, the grand child span is raised by 17px. This is due to a rounding off bug. In Opera 10 the grand child span is raised by 18px. In Internet Explorer 6, Internet Explorer, 7 and Internet Explorer 8 the grand child span is raised by 15px. This is a bug. In Safari 4 and Chrome 3, it raised by 23px. This is a bug.

Percentage Values with vertical-align

When vertical-align has a percentage value, the distance that the inline element is to be raised or lowered is calculated by multiplying the percentage with the line height of the inline element. The line height may be inherited or declared using CSS. The percentage can be positive or negative. A positive value raises the inline element, a negative value lowers it.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'">the @Â<span style="">@Â five</span></p>

In the above example, the default line height of the <p> is 40px. Therefore vertical-align:75% should raise the span by 0.75 * 40 = 30px.

Firefox 3 and Firefox 3.5 raise the span line box by 31px; Internet Explorer 8, Safari 4, Chrome 3 and Opera 10 by 30px. Internet Explorer 6 and Internet Explorer 7 raise the span line box by 26px. This is a bug.

Length Values - px and em with vertical-align

The distance that an inline element is raised or lowered by the vertical-align property can be specified in px or em. A positive value raises the inline element, a negative value lowers it.

When specified in em, to find the distance that the element is moved in px, the em value is mulitplied with the font size of the inline element that the vertical-align declaration is applied to. The font size may be inherited or declared directly with CSS. Note that even though the font-size declaration does not affect the rendering of images, it is used by the browser to convert em values to pixels when an image has a vertical-align declaration in em.

Example 10: <p class="test">the @Â<img style="vertical-align:16px" src="20x50.jpg" alt="20x50 image" /></p>

Example 11: <p class="test">the @Â<img style="vertical-align:0.45em" src="20x50.jpg" alt="20x50 image" /></p>

Browser Bugs

Internet Explore 6's and Internet Explorer 7's implementation of vertical-align is extremely buggy. These browsers produce unexpected results when vertical-align is used on an inline element of reduced or increased line height (inherited or directly declared) and on replaced elements whose parents are of reduced or increased line height. They also compute lower than expected values for vertical-align percentage declarations.

Firefox 3 displays incorrect rendering when vertical-align:top is used on a span containing an image that is taller than the ascent. Firefox 3 and Firefox 3.5 compute higher than expected values for vertical-align percentage declarations.

Opera 10 displays incorrect rendering when vertical-align:bottom is used on an image that is taller than the ascent on a <p> of increased line height. Opera 10's implementation of vertical-align:text-bottom is buggy.

Safari 4 and Chrome 3 incorrectly renders the positioning of an image with vertical-align:bottom on a <p> of decreased line height. These browsers also incorrectly compute a much larger value than expected for vertical-align percentage declarations.

A bug in Internet Explorer 8, vertical-align:text-bottom and vertical-align:text-top produce no effect on a span of increased or decreased line height. The line height on the span can be inherited or directly declared.

The major browsers differ in the distance that they raise or lower elements with vertical-align:sub and vertical-align:super.

Conclusion

The vertical-align property does not produce consistent results across browsers except when used with px values. Therefore, for consistent rendering across browsers, vertical-align with keywords, percentages and em values should be avoided.