relative to the text line. Compare the following examples, the first uses vertical-align:bottom, the second uses vertical-align:top and the last uses vertical-align:middle..Text can be indented using the property: text-indent. The value of text-indent can be positive (the first line of text shifted to the right of the left margin) or negative (the first line of text shifted to the left of the left margin - a hanging indent or "outdent"). Hanging indents can disappear if the left margin is also the left edge of the browser window. To use a hanging indent properly, there must be an existing left margin (or some left padding) so there is a space in which the hanging indent text can appear. Any unit of length, including percentages, can be use with text-indent.
Horizontal Alignment is controlled using the property text-align. There are five possible values in CSS2.1: left, center, right, justify, inherit. Left, center and right are well known to most from word processing. Note that text-align applies to the text in the element, and does not align the element itself. For example, p {text-align:right;} aligns the end of each line of text with the right margin. Since p is a block element there is no empty space on the left side of the element even if it appears there is in a browser.
Justified text adjusts the spacing between words and letters so that the left and right edges of the text are "smooth" or straight. Using text-align:justified can override any word-spacing or letter-spacing property values. The browser (or other viewing agent) determines how to do the justification. Browsers may adjsut either or both word or letter spacing. Some browsers may adjust line spacing or letter height.
Word spacing accepts values of positive or negative length and inserts this measure between words in addition to the standard spacing. Its default value is 0 (zero), no more spacing than what we would expect normally. As is probably obvious, positive values increase the spacing between words and negative values decrease the spacing. Here are a few examples.
Word spacing of 5em has been applied to this paragraph. Its default value is 0 (zero), no more spacing than what we would expect normally. As is probably obvious, positive values increase the spacing between words and negative values decrease the spacing. Here are a few examples.
Word spacing of -5pt has been applied to this paragraph. Its default value is 0 (zero), no more spacing than what we would expect normally. As is probably obvious, positive values increase the spacing between words and negative values decrease the spacing. Here are a few examples.
Letter spacing is quite similar to word spacing. It accepts values of positive or negative length and inserts this measure between letters. Its default value is 0 (zero), no more spacing than what we would expect normally. As is probably obvious, positive values increase the spacing between words and negative values decrease the spacing. Here are a few examples.
Letter spacing of 0.5em has been applied to this paragraph. Its default value is 0 (zero), no more spacing than what we would expect normally. As is probably obvious, positive values increase the spacing between words and negative values decrease the spacing. Here are a few examples.
Letter spacing of -2pt has been applied to this paragraph. Its default value is 0 (zero), no more spacing than what we would expect normally. As is probably obvious, positive values increase the spacing between words and negative values decrease the spacing. Here are a few examples.
In case you cannot read the previous paragraph, letter spacing of -2 pt was applied.
As mentioned elsewhere, if an element is set to text-align:justified this can change or even eliminate any word or letter spacing.
The property line-height refers to the distance between the base lines of sucessive lines of text, not to the height of the font. In print this is called leading. Line-height defines the minimum distance between text baselines in an element, it does not set a fixed distance. Line-heights can be given with absolute (in, cm, mm, pt, pc) or relative (%, em) units. Displayed line height is calculated using both font size and line-height: Space above a line of text = (Line-height — font-size) / 2. Space below is identical to space above.
The default value of line-height will vary from browser to browser. However it is normally about 1.2 times font-size (120%, 1.2em).
Line height is inherited and is displayed as the value calculated for the parent element, not the child element. This may cause some unwanted results. For example, look at the following example.
body {font-size: 8pt;}
div {line-height: 1em; } /*1em = 8pt since font-size is 8pt */
p {font-size: 14pt; } /* Will continue to use line-height of 8pt */
This paragraph's font size is 14 pt but its inherited line height is only 8 pt. This will cause the text to be squashed together vertically somewhat. How to fix is described below.
One possible solution is to set a line-height for every element. That could be tedious, and you might have to resort to in-line styles, something that is undesirable. Another, more practical solution is to specify a number without a unit for line height. The number then becomes a multiplier which is inherited.
body {font-size: 8pt;}
div {line-height: 1.5; } /*Font sizes will be multiplied by 1.5 to calculate line heights */
p {font-size: 14pt; } /* line height becomes 14*1.5 = 21 pt */
This paragraph's font size is 14 pt. It inherits a line height multiplier of 1.5. This will generate an actual line height of 21 pt, plenty of spacing for the text to be easily read.
Not only can the vertical spacing of text be aligned, the position of text within each text or element "box" can also be adjusted. This is done using vertical-align. It will accept eight different, and mutually exclusive, values: baseline, sub, super, top, text-top, middle, bottom, text-bottom. Baseline is the default, sub and super may be familiar from HTML as element names, sub for subscript, super for superscript. The distance text is raised or lowered for super and sub depends on the browser.
The "box" the text is in is an invisible box based on the font size. Most of the time top middle and bottom attributes are used to align in-line images relative to the text line. Compare the following examples.
The "box" the text is in is an invisible box based on the font size. Most of the time text-bottom is used to align in-line images relative to the text line. Compare the following examples, the first uses vertical-align:bottom, the second uses vertical-align:top and the last uses vertical-align:middle..
The "box" the text is in is an invisible box based on the font size. Most of the time text-top is used to align in-line images relative to the text line. Compare the following examples, the first uses vertical-align:bottom, the second uses vertical-align:top and the last uses vertical-align:middle..
The "box" the text is in is an invisible box based on the font size. Most of the time text-top is used to align in-line images relative to the text line. Compare the following examples, the first uses vertical-align:bottom, the second uses vertical-align:top and the last uses vertical-align:middle.. Middle should be self explanatory but is not. Some browsers calculate the mid-point of the text line as 0.5ex (i.e. 0.25em, 0.25 of the font size) above the baseline, others calculate it as the mid-point between the current baseline and the baseline above.
Percentages can also be used to raise (positive values) or lower (negative values) text or other inline element in a line. Using a percentage raises or lowers the baseline for that particular portion of text or inline element. Absolute and relative length units can also be used in the same way.
Percentages can also be used to raise (50%) or lower (-50%) text or other inline element in a line. Using a percentage raises or lowers the baseline for that particular portion of text or inline element. Notice these changes in vertical alignment affect not only the line where the change occurs but quite often the lines of text above and below.
Absolute and relative length units can also be used to raise (5pt) or lower (-5px) text or other inline element in a line. Using a percentage raises or lowers the baseline for that particular portion of text or inline element. Notice these changes in vertical alignment affect not only the line where the change occurs but quite often the lines of text above and below.