In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > letterSpacing

letterSpacing style property

Browser support:

Specifies or returns the amount of space between letters.

Syntax:

object.letterSpacing;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: letter-spacing

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

normal

Default. Normal spacing is used.

space in length

The space between letters in length units. For the supported length units, see the length page.

Default: normal.

Example HTML code 1:

This example illustrates the use of the letter-spacing property:

<head>
    <style>
        .example {
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="example">letter-spacing: 10px</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the letterSpacing property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeLetterSpacing () {
            var div = document.getElementById ("myDiv");
            var input = document.getElementById ("myInput");

            div.style.letterSpacing = input.value;
        }
    </script>
</head>
<body>
    <div id="myDiv">sample text to change</div>

    <input id="myInput" type="text" value="40" />
    <button onclick="ChangeLetterSpacing ();">Change the letter-spacing of the div!</button>
</body>