Settings in CSS: distance between lines

In CSS, the distance between lines is very easy to set. There is a special property for this. But, of course, there are many other parameters that are universal, and they can be applied to text.

If you do not do anything, the default values are set. If you want, you can change this distance. The value can be either in percentage or in pixels.

Row Height

In CSS, the distance between the lines can be demonstrated by the following figure.

The above image shows the parameters with the corresponding distances. The text is located in the font-size space. Note that the line of text does not start on the bottom, but is slightly higher. The space below is provided for letters that have elements from below (g, y and so on).

Note that the space between font-size blocks is called leading. In HTML and CSS this property does not appear in any way, but it is in other graphic and text editors. For example, in Adobe Photoshop.

The figure above shows where in Photoshop you can specify the leading one. A number indicates the font-size parameter.

Examples of using line-height

In CSS, the distance between lines can be set by percentage. An illustrative example is given below.

In the case of a small value, the user of your site will be uncomfortable to read.

The distance can be changed and the font size. If the difference between the main parameters is very different in the figures, then this difference is compensated by an increase in leading.

Subtlety of design

In CSS, the distance between the lines can be additionally adjusted with various indents. Let us consider an example in the figure.

In the "Element" field, in our case there will be text. Padding is an indentation within an object, and margin is an indentation of an object. Border is a frame. It can be 0 pixels, and maybe 100.

The following image shows all the indents, the frame and the height of the text line at once.

If you have a small text, all in one line, or each line in a separate paragraph, then the distance can be adjusted by indenting between these paragraphs. That is, maring and padding between lines in one element have no effect. They only indent the edges of the object. An object is an entire paragraph, not a line in it. It is important not to get confused here.

In cases where there are many lines, and all this is located in one object, the font is recommended to be changed by the main parameters.

How to increase the distance between CSS lines

The distance between the lines of HTML can be assigned to a class or to all paragraphs in the text. If you specify this: p {line-height: 20px; }, Then absolutely all paragraphs on the page will have lines of 20 pixels. If you need different sizes in different places, it is recommended to do as follows.

Prescribing styles.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

For clarity, we'll add a frame so you can see that it works. In the future, it must be removed.

Then apply these classes. The result is as follows.

Note that in the third case, the band hit the text. All because the font size is larger than the line height. Therefore, it is important to ensure that there are no such contradictions. If you make a small line height, then decrease the font accordingly.

It is not recommended to do too little text and a small distance between the lines. Since no user can not read it all. His eyes will quickly grow tired. Search engines also say that the text is user-friendly.

Moreover, recently there is a great emphasis on convenience for mobile users. There, the recommendations always say that the font size should be normal, not small. This affects the links especially strongly. With their small size, the user will have difficulty in using the site navigation.

The search engine "Google" has a special tool that helps in this analysis. It is very convenient for webmasters.

Here is an example of the results that can be.

It is recommended to use their hints, since these criteria influence the search result.