In HTML/CSS, if we have to add some extra spaces between the words or lines, CSS properties enable us to control the spacing between the lines, words, and even the letters. This write-up will concentrate on the word-spacing and letter-spacing properties and after reading this write-up, you will be able to answer the following terms:
- What is word-spacing?
- How to use word-spacing property in CSS?
- What is letter-spacing?
- How to use letter-spacing property in CSS?
- What is the difference between letter-spacing and word-spacing properties?
This write-up provides a complete understanding of the above-mentioned questions with the help of some examples. So, without a further delay let’s start the discussion with the formal definition of word-spacing.
Word-spacing in CSS
As the name itself suggests this property is capable to handle the spacing between the words. We can assign a specific “length” to this property to adjust the spacing between the words i.e. we can increase or decrease the space between different words.
How to Use Word-spacing Property in CSS
Let’s understand this concept practically with the below-given example:
Example
In this code, we created a paragraph and added some extra space between the words:
Following will be the output for the above piece of code:
What we have observed in the above code is, it’s a normal paragraph with no extra spaces, therefore, we need a proper way to put space between the words.
Example
We can add some extra spaces using CSS word-spacing property:
Now the output will verify the space between each word is 0.5 cm:
The space can be added between the words in various units like px, cm, mm, etc.
letter-spacing in CSS
This property is similar to the word-spacing property the only difference is that the letter-spacing property targets the individual letters instead of words i.e. it controls the space between the letters.
How to Use letter-spacing Property in CSS
We will understand the working of this property using an example. To differentiate between the working of word-spacing and letter-spacing we will create a paragraph and a heading.
Example
The below given code will implement word-spacing on the <p> element and letter-spacing on the <h2> element:
Following will be the output for the above-give code:
The above output verifies that letter-spacing property added the space between the letters and word-spacing property added the space between the words.
Conclusion
The word-spacing property, and letter-spacing properties can be used in the CSS to control the spacing between the words and letters respectively. Different CSS length values like px, mm, cm, can be used to adjust the space between the letters and words. This write-up presents a complete guideline for word-spacing, letter-spacing properties in CSS, and explains the need and use of these properties.
