CSS Text Spacing

The CSS text spacing works with CSS properties to maintain and add space between words, lines, all words, and any two letters. We can design the word format and space with external, internal and inline style tags. The spacing in text helps to add length and make more readable text on the web page. There are four ways to add text spacing using CSS properties.

1. Spacing between all letters
2. Spacing between any two letters
3. Spacing between words
4. Spacing between lines
5. The first line of text spacing

Spacing between All Letters

The spacing between all letters is created through CSS property letter spacing. This property works with the value of the keyword (normal), pixel (10px), and em (0.25em). We can use the positive and negative values with the letter-spacing property.

Syntax

The syntax shows the use of letter spacing in CSS.

Examples

The following examples show spacing between all letters in the css. The example uses different letter spacing values in positive and negative formats.

Example 1:

The example shows the basic spacing between all letters using CSS letter spacing properties. Here, we can use the positive values for the text spacing.

Output

The output shows all letter spacing on the html page.

Example 2:

The example shows the basic difference in spacing between all letters using CSS letter spacing properties. Here, we can use the negative values for the text spacing.

Output

The output shows all letter spacing on the html page.

Spacing between Words

The spacing between texts is created through CSS property word spacing. The text spacing property works with the values of the keyword (normal), pixel (10px), and em (0.25em). We can use the positive and negative values with the word spacing property.

Syntax

The syntax shows the use of the word spacing in CSS.

Examples

The following examples show spacing between all words in the css. The example uses different word spacing values in positive and negative formats.

Example 1:

The example shows the basic spacing between all words using CSS word-spacing properties. Here, we can use the positive values for the word spacing.

Output

The output shows all word spacing on the HTML page.

Example 2:

The example shows the basic difference in spacing between all words using CSS word-spacing properties. Here, we can use the negative values for the word spacing.

Output

The output shows all word spacing on the HTML page.

Spacing between Lines

The spacing between lines of text is created through CSS property text-height. We can use property with the value of the keyword (normal), pixel (10px), and em (0.25em). We can use the positive and negative values with the line height in the inline, internal, and external properties.

Syntax

The syntax shows the use of letter spacing in CSS.

Examples

The following examples show spacing between the height of the lines in the CSS. The example uses different height spacing values in positive and negative formats.

Example 1:

The example uses CSS to show the line height or space between the two lines. Here, we use line height between text lines for all the containers.

Output

The output shows the line height on the HTML page.

Example 2:

The example uses CSS to show the line height or space between the two lines. Here, we use line height between text lines for all required elements.

Output

The output shows the line height on the HTML page.

Example 3:

The example shows the line height of the two lines using CSS inline element. Here, we use line height between texts for the required tag.

Output

The output shows the line height on the HTML page.

Spacing between any two letters

We can create space between two letters using CSS properties. Add the span tag for the letters and use the letter-spacing property with the value. We can create space for the particular tag text.

Examples

The following examples show the spacing between two letters and their height in the CSS. The example uses different types of spacing values in positive and negative formats.

Example 1:

The example shows the space between the two letters using CSS. Here, we use space between text or words for all the containers.

Output

The output shows spacing between two words on the HTML page.

Example 2:

The example uses CSS to show the line height or space between the two words.

Output

The output shows the line height on the HTML page.

First Line of Text Spacing

The CSS text-indent property adds space to the first line of the text on the web page. We can choose the container or tag and operate the text-indent property to create space for the first line.

Syntax

The syntax shows the use of the first line spacing in CSS.

Examples

The following examples show the spacing of the first lines of the text in the css. The example uses various types of spacing values in positive and negative formats.

Example 1:

The example uses CSS to show the line height or space between the two lines. Here, we use line height between text lines for the entire container.

Output

The output shows the first text line space on the HTML page.

Example 2:

The example shows the space between the first line of the word in the paragraph.

Output

The output shows the line height on the HTML page.

Conclusion

In conclusion, The CSS text spacing properties help to show content and information that is attractive and user-friendly. It looks more readable and eye-catching on the web page.