HTML DOM Style letterSpacing Property


The HTML DOM Style letterSpacing property is used for setting or getting the characters space between text.

Following is the syntax for −

Setting the letterSpacing property −

object.style.letterSpacing = "normal|length|initial|inherit"

The above properties are explained as follows −

Value
Description
normal
Thisis the default property and sets the character space to normal.
length
Forspecifying the character space in length units and negative valuesare also allowed.
initial
Forsetting this property to initial value.
inherit
Toinherit the parent property value

Let us look at an example for the letterSpacing property:

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script>
   function changeSpacing() {
      document.getElementById("myP").style.letterSpacing = "12px";
      document.getElementById("Sample").innerHTML = "The space between characters is now increased";
   }
</script>
</head>
<body>
   <p id="myP">This is some text inside the sample paragraph. This is another line in paragraph. This    is second line in paragraph. This is third line in paragraph. </p>
   <p>Increase the space between characters in the above paragraph by clicking the below button</p>
   <button type="button" onclick="changeSpacing()">Increase Letter Spacing</button>
   <p id="Sample"></p>
</body>
</html>

Output

On clicking the “Increase Letter Spacing” button −

Updated on: 24-Oct-2019

21 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements