Export (0) Print
Expand All
3 out of 9 rated this helpful - Rate this topic

letter-spacing property

Specifies the amount of additional space between letters in the object.

CSS 2.1, Section 5.4.2Internet Explorer 9

Syntax

letter-spacing: normal | <length> | inherit

Property values

normal

Default. Default spacing.

length

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.

inherit

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

Remarks

When specified as a positive length value, the letter-spacing attribute adds the specified value to the default spacing between characters within an element. A negative length value decreases the space between characters. Letter spacing can be influenced by justification.

Examples

The following examples use the letter-spacing attribute and the letter-spacing property to change the space between letters.

This example uses blockquote as a selector to change the spacing to -0.2 millimeters for all blockquote objects on the page.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/letter-spacing.htm


<!DOCTYPE html>
<html>
<head>
  <title>letter-spacing</title>
  <style>
    blockquote {
      letter-spacing: -0.2mm;
    }
  </style>
</head>

<body>
  <p>The following <strong>BLOCKQUOTE</strong> tag has been set as a HTML selector with letter-spacing at -0.2mm.</p>
  <!-- THE FOLLOWING BLOCKQUOTE WILL TAKE ON THE ATTRIBUTES OF THE BLOCKQUOTE CLASS -->
  <blockquote>
    Here's the blockquote. This and all other blockquotes will have the letter-spacing set at -0.2mm.
  </blockquote>
</body>
</html>

This example uses inline scripting to set the spacing to 1 millimeter when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/letterSpacing.htm


<!DOCTYPE html>
<html>
<head>
  <title>letterSpacing</title>
</head>

<body>
  <!-- WE USE IN-LINE SCRIPT TO CONTROL letterSpacing ON MOUSE EVENTS:  -->
  <div style="font-size: 14pt" onmouseover="this.style.letterSpacing='1mm'"
    onmouseout="this.style.letterSpacing=''">
    Run your mouse over me to make the spacing between the letters increase.
  </div>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.