Today we are going to parse CSS line spacing. This property helps make the text more readable. It is also often used to reduce the size of the content on the page. Especially for the most inexperienced, a short excursion on the history of the issue will be provided just below. So, further you will learn how to set CSS line spacing.
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 a markup language (for example, HTML). Before CSS, document design was set using built-in HTML tags, but they were extremely inconvenient and filled all the code. Therefore, it was decided to create a new language that will be responsible for the design. Today, CSS and HTML are two inextricable concepts. The syntax for cascading tables is very simple, using properties and their values, such as “background: red”. To assign a scope, you just need to write a tag name (or identifiers) before the property: “body {background: red; } ”, And the command itself is placed between curly braces. A semicolon must be placed at the end of each recorded line with a description of the characteristic, otherwise an error will occur.
Intervals
But enough introductory phrases, let's get down to business. CSS line spacing is set using the line-height property. It can be applied 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 for all elements on the page, the line spacing will be 20 pixels. As a value, this property can use any units known in CSS (points - pt, pixels - px, inches - in, etc.). You can also use relative values, such as percentages or factors. In this case, the CSS spacing between the lines will be calculated from the parent element. The default value is the normal keyword.
additional information
Since we are talking about intervals, it is worth mentioning about the distance between the letters. CSS defines a separate property for this feature, namely letter-spacing. The principle of operation 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 versions of the language. An example of using the property: "h2 {letter-spacing: 10px; } ". If you assign a spacing between letters for the body element, then all elements will inherit this characteristic (if the value is not explicitly reassigned).
Conclusion
It should be noted that some browsers incorrectly define CSS line spacing. 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 error is fully fixed. A similar problem occurs when using a property to determine the distance between letters. In all other programs, these teams are determined in accordance with the W3C (World Wide Web Consortium).