Computer >> Computer tutorials >  >> Programming >> HTML

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

<!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

HTML DOM Style letterSpacing Property

On clicking the “Increase Letter Spacing” button −

HTML DOM Style letterSpacing Property