Line spacing, CSS, basics

Today we will analyze the line spacing of CSS. This property helps make the text more readable. It is also often used to reduce the size of the content on the page. Specifically for the most inexperienced, a short digression on the history of the issue will be given below. So, next, you'll learn how to set the line spacing of CSS.

Required Information

CSS stands for Cascading Style Sheet, which means "cascading style sheets". This language is used to design web pages that were written in markup language (for example, HTML). Before the appearance of CSS, the design of documents was installed using embedded HTML tags, but they were extremely inconvenient and filled all the code. Therefore, it was decided to create a new language, which will be responsible for the design. Today CSS and HTML are two inseparable concepts. The syntax of cascading tables is very simple, here we use properties and their meanings, for example, "background: red". To assign a scope, you simply write the name of the tag (or identifiers) before the property: "body {background: red; } ", And the command itself is placed between the curly braces. At the end of each recorded line with a description of the characteristic, a semicolon should be placed, otherwise an error will occur.

Intervals

But enough introductory phrases, let's get down to business. Line spacing is set using the line-height property. It can apply to all elements. The property itself is inherited, which means that the children will copy the interval from their parents. For example, if you write the following command: body {line-height: 20px}, then all elements on the page have a line spacing of 20 pixels. As a value, this property can use any units of measurement known in CSS (items - pt, pixels - px, inches - in, etc.). You can also use relative values, such as percentages or multipliers. In this case, the CSS-interval between the lines will be calculated from the parent element. The default value is the keyword normal.

additional information

Since we are talking about intervals, we should mention the distance between the letters. To determine this characteristic, CSS has a separate property, namely letter-spacing. The principle of this command is similar to line-height. Units and other values are the same. CSS-spacing between letters can also be applied to all elements, and has support in all language versions. An example of using the property is "h2 {letter-spacing: 10px; } ». If you assign an interval between the letters for the body element, then all elements inherit this characteristic (unless the value is explicitly remapped).

Conclusion

It should be noted that some browsers incorrectly define the line spacing of CSS. For example, the IE program (up to version 7.0) incorrectly calculates the distance. In this case, the difference in the interval should be taken into account. In newer versions of this browser, the bug is completely fixed. A similar problem occurs when using the property to determine the spacing between letters. In all other programs, these teams are defined in accordance with W3C (World Wide Web Consortium).