CSS to Add Space Between Words

CSS to Add Space Between Words

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 2 mins read

In CSS, the letter-spacing property is used to add space between characters in a text, while the word-spacing property is used to add space between words in a text. Here are examples of both properties to add space between words and letters in CSS.

Add Letter Spacing in CSS

The letter-spacing property only applies to inline elements, such as span or a elements, as well as block-level elements that have their display property set to inline-block. It does not apply to block-level elements that have their display property set to block, such as p or div elements. Below is an example:

p {
  letter-spacing: 2px;
}

This CSS code will add 2 pixels of space between each character in a paragraph, like this:

<p>This is a paragraph with added space between characters.</p>

Note that the letter-spacing property only applies to inline elements, such as span or a elements, as well as block-level elements that have their display property set to inline-block. It does not apply to block-level elements that have their display property set to block, such as p or div elements.

Add Spacing to Words in CSS

The word-spacing property also only applies to inline elements and block-level elements that have their display property set to inline-block. It does not apply to block-level elements that have their display property set to block. Here is an example of how to use the word-spacing property in CSS:

p {
  word-spacing: 10px;
}

This CSS code will add 10 pixels of space between each word in a paragraph, like this:

<p>This is a paragraph with added space between words.</p>

Note that the word-spacing property also only applies to inline elements and block-level elements that have their display property set to inline-block. It does not apply to block-level elements that have their display property set to block.

In both cases, the letter-spacing and word-spacing properties accept a length value (such as px, em, or rem), which specifies the amount of space to add between characters or words. You can also use the value normal to reset the spacing to the default value, or use a negative value to reduce the space between characters or words.

Related Posts