How to adjust the line spacing in CSS?

Text to date is still the main type of transmitted information on the vast spaces of the World Wide Web. Therefore, the management of its appearance is given special attention. One important characteristic of the text is the line spacing, which determines the distance between the lines. If you've never met this rule, you probably never worked with CSS. After all, it is this style language that provides available commands for changing all important external characteristics of the text. This rule is supported by all modern browsers and is included in the standard of all versions of cascading style sheets (CSS: Cascading Style Sheets).

Rule

In CSS, the line spacing is set using a simple line-height command. The recording is made in the usual way. You can assign any nonnegative number as a value. If "line-height: -4px;" is specified, the command will be ignored. You can specify a value of "normal" or "inherit". The first one will use the automatic interval setting, which is determined depending on the type and size of the selected font. In this case, the distance between the lines is set by the browser itself. The line spacing can take the value inherited from the "parent" tags using the "inherit" value.

Value

All values, other than standard commands, can be divided into two categories: relative and absolute. Line spacing CSS allows you to flexibly manage the distance between lines, using different and more convenient methods of customization. Absolute values include all known units of length that are used in CSS. This list includes: in (inches), pt (points), px (pixels), and others. The interval is calculated from the baseline of the font. If you write down the rule: "line-height: 10px;", the line spacing will always be 10 pixels. This method is ideal when you need to specify the exact interval for a particular font. But do not forget that everyone has a different screen expansion. And if you have such a distance looks great, it does not mean that everyone will have the same effect. For example, on mobile devices a large line spacing can cause huge inconvenience.

Relative values

To solve the problem with different screen expansion, you can use relative values. The percentage expression is most often used. The value in this case is set relative to the font height. For example, specifying "line-height: 150%;", we get an interval that is half the middle letter. For 100% the height of the used font is assumed. Most experienced developers recommend using relative values. So you save yourself and your users from the problems associated with various screen extensions.

Conclusion

If you use a non-standard font set, and you are interested in a strictly defined line spacing, choose absolute values. In all other cases it is desirable to set the percentage property. When you need to make an individual interval for a particular section of the document, use id-labels, or selectors. Thus, you do not need to set the line spacing for the entire document.