Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the CSS word-spacing property?

Akande Olalekan Toheeb

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

We often have challenges with spacing when using CSS fonts. The default space between words in these fonts may be dissatisfying, and this is the basic reason we have the CSS word-spacing property.

The CSS word-spacing property declares the length of space between words and between tags.

Syntax

All CSS properties have the syntax:

property: values;

which is also the case for the word-spacing property.

Meanwhile, the word-spacing property values can be declared in four different ways, which are:

  • Using the keyword value.
  • Using length values.
  • Using the percentage values.
  • Using the global values.

Values

1. Keyword value

       syntax:
        word-spacing: normal;

The keyword value sets the space between words or tags to the predefined length set by the current font and/or the browser.

2. Length values

     syntax
        word-spacing: 5px;
        word-spacing: 0.3em;

The length values add extra spacing to the default space defined by the font.

3. Percentage values

     syntax
        word-spacing: 10%;

The percentage values add extra space as a percentage of the affected character’s advanced width.

4. Global values

The global values include:

  word-spacing: inherit;
  word-spacing: initial;
  word-spacing: revert;
  word-spacing: unset;

inherit: This sets the text to use the value of the parent element.

initial: This sets the text to get the default value of the font used.

revert: This reverts the value of the property from its current value to the value it would have if this value hadn’t been specified. It sets the value to default or inherits.

unset: This acts as either inherit or initial. It will act as inherit if the parent has a value that matches; otherwise, it will act as initial.

Note: Global values work the same way for every property that uses them.

Each div is given an id which corresponds to the word-spacing declared value in the CSS.

Study the example above for better understanding.

RELATED TAGS

css
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring