Quick Reach
The letter-spacing property
The letter-spacing property is used to increase or decrease the space between the letters in the specified text. The default value of letter-spacing CSS property is normal.
The negative value will decrease the spacing between letters whereas positive value will increase it.
A demo of CSS letter-spacing property
The example below uses the letter-spacing property in two elements. One is the heading 1 (h1) where a positive value is given to increase the spacing between letters.
The other is a paragraph, where a negative value is given to decrease the spacing between letters in the letter-spacing property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #3355bb;
letter-spacing:3px;
}
p
{
background-color: #F0F0F0;
color: #3355bb;
letter-spacing:-1px;
}
</style>
</head>
<body>
<h1>This is letter spacing demonstration with positive value</h1>
<p>This is letter spacing with negative value, to decrease distance between letters</p>
</body>
</html>
|
CSS word-spacing property
The word-spacing property is used to specify the space between words in the specified text.
As in the case of letter-spacing, the negative value will decrease the spacing between words while a positive value will increase the white spacing between words as using the word-spacing CSS property.
A demo of using word-spacing property
The following example is almost like the above example, except we will use the spacing between the words. The example uses the word-spacing in two elements.
One is the heading, using a positive value to increase the spacing between the words. While the paragraph is using a negative value to decrease the spacing between the words in the word-spacing property.
See the output by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #3355bb;
word-spacing:4px;
}
p
{
background-color: #F0F0F0;
color: #3355bb;
word-spacing:-2px;
}
</style>
</head>
<body>
<h1>This is word spacing demonstration with positive value</h1>
<p>This is word spacing with negative value, to decrease distance between words</p>
</body>
</html>
|
Read more: CSS vertical-align property
Leave A Comment?