PUBLISHED ON: APRIL 12, 2021
CSS letter-spacing Property
The letter-spacing property in CSS is known for setting the horizontal spacing behavior between the text characters. This property value is added to the natural spacing between characters while rendering the text.
Positive values of this property cause the characters to spread farther apart. And the negative values of this property bring characters closer together. This property may be specified as one of the keywords like normal and length.
Syntax
letter-spacing: normal|length|initial|inherit;
Example: CSS letter-spacing Property
In the example below, we are using the letter-spacing property to given space in between the letters of the text according to the values specified by us.
<!DOCTYPE html>
<html>
<head>
<title>The letter-spacing property in CSS</title>
<style type="text/css">
.normal { letter-spacing: normal; }
.em-wide { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide { letter-spacing: 6px;
color: green;
}
</style>
</head>
<body>
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
</body>
</html>
Output
Example 2: CSS letter-spacing Property
Here in this second example below, we have given the letter-spacing property value as 1px. So, the letters get aligned in-text leaving a space of 1px in between.
<!DOCTYPE html>
<html>
<head>
<title>The letter-spacing property in CSS</title>
<style type="text/css">
.normal {
letter-spacing: 1px;
color: red;
font-weight: 20px;
}
</style>
</head>
<body>
<p class="normal">Study Tonight</p>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the letter-spacing property in CSS is normal. This property is applicable to all the elements and also to the ::first-line and ::first-letter. It is an inherited property. The computed value for this property is an optimum value that consists of either an absolute length or the keyword normal. The animation type for this property is length.
