How to change line spacing in css? CSS settings: line spacing.


For block elements, defines the minimum text line height. For inline inline elements (like ) the line-height property has no effect. For other inline elements, line-height specifies the height that is used to calculate the block's line height.

brief information

Designations

DescriptionExample
<тип> Indicates the type of the value.<размер>
A && BThe values ​​must be output in the order specified.<размер> && <цвет>
A | BIndicates that you need to select only one value from the proposed ones (A or B).normal | small-caps
A || BEach value can be used independently or together with others in any order.width || count
Groups values.[ crop || cross ]
* Repeat zero or more times.[,<время>]*
+ Repeat one or more times.<число>+
? The specified type, word, or group is optional.inset?
(A, B)Repeat at least A, but no more than B times.<радиус>{1,4}
# Repeat one or more times separated by commas.<время>#
×

Values

Any number Above zero is perceived as a multiplier of the font size of the current text. For example, a value of 1.5 sets one and a half line spacing. Any units of length accepted in CSS are also accepted as values ​​- pixels (px), inches (in), points (pt), etc. It is allowed to use percentage notation, in this case the font height is taken as 100%.

Normal The distance between lines is calculated automatically.

Sandbox

Winnie the Pooh was always not averse to a little refreshment, especially at eleven in the morning, because at that time breakfast had long ended, and lunch had not yet begun. And, of course, he was terribly happy to see that the Rabbit was taking out cups and plates.

div (line-height: 0.5; )

Example

line-height

Normal postulate: algebra or greatest and least values ​​of a function?

The epsilon neighborhood, except in the obvious case, supports a complex integral over an infinite domain.

The result of this example is shown in Fig. 1.

Rice. 1. Applying the line-height property

Object Model

An object.style.lineHeight

Note

Internet Explorer prior to version 7.0 does not correctly calculate line heights for images and form elements.

Specification

Each specification goes through several stages of approval.

  • Recommendation - The specification has been approved by the W3C and is recommended as a standard.
  • Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
  • Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
  • Working Draft - A more mature version of a draft that has been discussed and amended for community review.
  • Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
  • Draft ( Draft specification) - the first draft version of the standard.
×

Property line-height sets the spacing between lines of text (line spacing). The property does not set the space between lines of text as it might seem, it sets text line height. This means that the actual space between lines will be calculated like this: line-height - font-size= distance between lines of text. Or vice versa line-height = font-size+ distance between lines of text.

Property line-height sometimes used in a non-standard way to center text in height.

Syntax

Selector ( line-height: CSS units| interest | multiplier | normal | inherit; )

Values

By default, the browser selects line spacing automatically ( normal).

Examples

Example

line-height - font-size= 35px - 13px = 21px:

P (font-size: 13px; line-height: 35px; )

Result of executing the code:

Example

Let's reduce the gap to 21px - 13px = 7px:

P (font-size: 13px; line-height: 21px; )

Result of executing the code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Example

IN in this example the distance between lines of text will be line-height - font-size = 13px - 13px = 0px- the lines almost stick together (the tails of the letters top line will touch the tails of the lower letters):

P (font-size: 13px; line-height: 13px; )

Result of executing the code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Example

In this example the value line-height- multiplier 1.5 from font size. Hence line-height will be equivalent font-size * 1.5 = 13px * 1.5 = 20px. And the real space between the lines will be line-height - font-size = 20px - 13px = 7px:

P (font-size: 13px; line-height: 1.5; )

Result of executing the code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Example

Let's increase the multiplier:

P (font-size: 13px; line-height: 2.5; )

Result of executing the code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Example

If you do line-height less font-size, then the lines will generally overlap each other:

P (font-size: 13px; line-height: 9px; )

The result of executing the code.

In CSS, setting line spacing is very easy. There is a special property for this. But, of course, there are many other parameters that are universal and can be applied to text.

If no settings are made, the default values ​​are set. You can change this distance if you wish. The value can be either a percentage or pixels.

Row height

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

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

Note that the space between the 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 you can specify leading in Photoshop. And next to it is the font-size parameter.

Examples of using line-height

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

When small value It will be inconvenient for the user of your site to read.

The distance can also be changed by the font size. If the difference between the main parameters is very different in numbers, then this difference is compensated by increasing the leading.

Subtleties of design

In CSS, the spacing between lines can be further adjusted with various paddings. Let's look at the example in the figure.

In our case, the “Element” field will contain text. Padding is the padding inside an object, and margin is the padding behind the object. Border is a frame. It could be 0 pixels, or it could be 100.

The following image shows all the padding, border, and line height of the text at once.

If your text is small, just one line, or each line is 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 create indentation only along the edges of the object. The object is the entire paragraph, not the lines within it. It is important not to get confused here.

In cases where there are many lines, and all of this is located in one object, it is recommended to change the font with the main parameters.

How to Increase Space Between CSS Lines

Distance between HTML lines can be assigned to any class or for all paragraphs in the text. If you specify it like this: p ( line-height:20px; ), then absolutely all paragraphs on the page will have lines of 20 pixels. If needed in different places various sizes, then it is recommended to do as follows.

We write styles.

Class1 ( line-height:20px; )

Class2 ( line-height:16px; )

Class3 ( line-height:12px; )

For clarity, let's add a frame so you can see that it works. In the future it needs to be removed.

Please note that in the third case the stripe ran over the text. This is because it is greater than the line height. Therefore, it is important to ensure that there are no such contradictions. If you make a small line height, then reduce the font accordingly.

It is not recommended to make text too small and the space between lines too small. Because no user can calmly read all of this. His eyes will quickly get tired. Search engines They also say that the text should be user-friendly.

Moreover, in Lately 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 especially affects links. With them small size It will be difficult for the user to navigate the site.

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

Here is an example of the results that might occur.

Handling spaces between letters and words

1. Distance between words word-spacing

Sets spacing between words. Positive and negative values ​​can be used. With a negative meaning, words can overlap each other.

The value of word-spacing is influenced by the value text-align properties in case of text alignment in width. Inherited.

Syntax

P (word-spacing: normal;) p (word-spacing: 2px;)
Rice. 1. Spacing between words

2. Letter-spacing

The property sets the distance between letters (tracking amount) and symbols. Can take positive and negative values. It is advisable to use to increase the expressiveness and readability of headings, definitions, etc. Inherited.

Syntax

P (letter-spacing: normal;) p (letter-spacing: 2px;)
Rice. 2. Changing the distance between letters using the letter-spacing property

3. Handling white-space spaces

The property handles spaces between words and line breaks within an element. Not inherited.

white-space
Values:
normal Default value. Only one space is inserted between words; additional spaces are discarded. Text is only wrapped when necessary.
nowrap Prohibits line breaks except when used
.
pre Spaces in the text are not ignored; the browser displays additional spaces and line breaks.
pre-wrap Preserves whitespace in text by adding line breaks where necessary.
pre-line Deletes extra spaces, except in cases
.
initial Sets the property value to the default value.
inherit Inherits the property value from the parent element.

Syntax

P (white-space: normal;) p (white-space: nowrap;) p (white-space: pre;) p (white-space: pre-wrap;) p (white-space: pre-line;)

4. Setting tab-size

To change the amount of indentation obtained using the TAB key, use the tab-size property. Property values ​​are ignored when the white-space property is set to one of the three values ​​pre-line , normal or nowrap .

Only works for elements