CSS Property letter-spacing








letter-spacing defines the amount of whitespace between the characters.

Summary

ItemValue
Initial value normal
Inherited No.
Version CSS1
JavaScript syntax object.style.letterSpacing="3px"
Applies to All elements.

CSS Syntax

letter-spacing: length | normal | inherit




Property Values

The property values are listed in the following table.

Value Description
normal Default value. No extra space between characters.
length Set an extra space between characters and negative values are allowed
inherit Inherit the letter-spacing property from the parent element

Browser compatibility

letter-spacing Yes Yes Yes Yes Yes

Example

The following code uses px and em based value to set letter_spacing. 

p {letter-spacing: 6px;} 
em {letter-spacing: 0.2em;} 
p {letter-spacing: -0.5em;}

<!DOCTYPE HTML>
<html>
    <head>
        <style>
      p {<!-- ww  w.  ja  v a 2s.  co  m-->
          letter-spacing: -2px;
      }
        </style>
    </head>
    <body>
    <p>
        Two pixels of space have been 
        subtracted from between each letter.
    </p>
    </body>
</html>

Click to view the demo





Example 2

letter-spacing sets the space between letters.

Its value can be:normal or CSS length value. 

<!--   w  w  w .j  av a2 s  .  co m-->
<html>
<head>
<style rel="stylesheet" type="text/css">
p.normal {
    letter-spacing: normal;
}

p.wide {
    letter-spacing: 1.5em;
}

p.narrow {
    letter-spacing: -.2ex;
}
</style>
</head>
<body>
    <p class="normal">This paragraph has normal letter-spacing.</p>
    <p class="wide">This paragraph uses a 1.5em letter-spacing.</p>
    <p class="narrow">This paragraph uses a -.2ex letter-spacing.</p>
</body>
</html>

Click to view the demo