Spaces between words

A feature of the HTML language is that any number of spaces between words will be displayed as one. But sometimes a website developer needs to change the distance between words in the text, in particular, increase it.

It is known that the font size is changed using the FONT tag or using styles. It may be an idea to set a larger space, for example, using a similar construction:

This looks, firstly, very cumbersome, and secondly, the size of the space changes not only horizontally, but also vertically. Therefore, the line will be shifted from its baseline.

For a more elegant solution to the problem, you can try the following options.

Using a non-breaking space

The symbol is used in many cases. It is loved because, regardless of any conditions, it always sets a space. So you can put at least a dozen such spaces in a row, the browser will show them all. Although the word in this case is not entirely correct, the space is still not visible at all (example 1).

Example 1. Using the   symbol

   Я за вас свою роботу виконувать не буду!

In the example, a red line is created with four spaces: one regular space and three spaces using the symbol . The size of this space matches the size of the base font.

Using a non-breaking space is associated with certain inconveniences. Imagine that you need to change the spacing between words in all the texts on the site. You will have to do too much work for nothing. Therefore, the most acceptable way to change the spacing between words is to use styles.

Using style sheets

To set the spacing between words in text, the word-spacing parameter is used. Its value can be set in pixels (px), points (pt), millimeters (mm), and other units (example 2).

Example 2. Using the word-spacing attribute

<span style="word-spacing: 10px">Слон + хороша їжа = два слона</span></code>

The advantage of the latter approach is its convenience and centralization. A style can be described once in a global style sheet and applied to the desired elements of a web page (example 3).

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top