How to set line spacing in css. Change the spacing between paragraphs and lines in the Word text editor

21.09.2019 Reviews

Quite often, novice layout designers have problems mastering Cascading Style Sheets (CSS). Working with line spacing in CSS is no exception. Line spacing is the vertical distance between lines. As in a regular Microsoft Word document, you can also change this parameter in the text of the html file.

Using line-height when changing spacing

The first and most correct solution to the spacing problem is to set a value for the line-height property. By default, the value of this property is normal (line-height: normal;). Line spacing is calculated automatically by the Internet browser itself and depends, in particular, on the type of font, as well as its size. Any positive numeric value that is specified in the line-height style property will be interpreted by the browser as a number by which the size of the current font must be multiplied.

In CSS, line spacing can be specified in different units of length: points (pt), inches (in), pixels (px), and percentages (%). The percentage is calculated relative to the current font, and by default it is set to 100%. Remember that the line-height property borrows the inherit property from its parent.

Here are some examples of how to increase line spacing in CSS:

The process of working with line spacing is quite simple. You should have some basic knowledge of CSS and the ability to link the file to the main html page. Styles can also be set directly on the html page:

To make a one and a half spacing in this sentence, you need to add the following code in the CSS file:

line-height: 1.5;

In order to make double spacing, you can write the following code:

line-height: 200%;

In both cases, the browser will understand that the current font needs to be multiplied by 2. This value will be the line spacing.

Now here's an example of how to reduce the line spacing (CSS):

It is important to remember that a negative line-height value is simply not perceived, so its minimum value can be 0. To get half spacing, you need to write the following code:

line-height: 0.5;

line-height: 50%;

line-height: 0.5pt;

All 3 options are correct and comply with all W3C standards, respectively, will work in any browser version.

Using padding when changing spacing

However, besides changing the line-height property, there is another way to change the line spacing in CSS, this is to play with the values of the padding property. The padding style property is responsible for padding in any html object. By default, this property is 0. By choosing different values, you can change the line spacing, for example:

Working with line spacing is easy. It is enough to know the basics of CSS and be able to connect the file to the main html page. It can also be set directly on the page with the html extension.

To increase the line spacing, increase the property value:

Thus, the spacing between the lines in our paragraph will be increased by 10 pixels from the starting one. You can just as well reduce the line spacing by writing, for example:

Negative line spacing

If you noticed, it is also not allowed to enter negative values, so that the lines do not overlap each other. In CSS, line spacing cannot be negative. From a coding point of view and W3C standards, you can never write negative values in line spacing values.

Change line spacing in lists

Sometimes the task arises to change line spacing in lists

Paragraph 1

Point 2

Point 3

To increase the indentation, you need to write the following lines in the CSS file:

margin-top: 10px;

Thus, we indicated that the distance from each item in the list is increased by 10 pixels. Moreover, in in this case a negative value is also possible. Thus, we can set: - margin-top: -15px.

CSS is essential for styling text. Any specialist always uses them if he creates a beautiful site. Thanks to these attributes, you can perform any operations with the text.

As a rule, most typesetters do not like the default layout of text in html. CSS line spacing allows you to customize almost anything imaginable. And if you go deeper, then you can do what you never imagined.

How to make text line spacing in CSS

It is important to understand that you can set line sizes, indents, and so on for all elements where there is text. For example, all of these attributes apply just fine for:

paragraph;
lists;
;
tables;
headers;
and everything else where you place the text.

When looking at CSS line spacing, the first thing to look at is the following attributes.

In "Photoshop" there is the concept of Leading. There is no such attribute in CSS, but thanks to it, you can clarify the essence. Leading, in fact, is the distance between the lines.

In CSS, the size of a line is specified by the line-height and font-size parameters. As you can see, the figure clearly states that font-size is the size of the font. Not a single letter ever goes beyond these limits.

Line-height is the distance from the middle of the top Leading to the middle of the bottom Leading. All this is indicated by arrows in the figure.

Please note that if you specify a line height less than the font size, then the lines will run over each other. Be sure to monitor this so that this situation does not work out.

Some people think why the font-size is stretched lower than the line with letters. It's simple. After all, there are letters that are omitted below the main line level. The figure below is an illustrative example where symbols stretched up and down are used.

As you can see, the letters occupy the entire font-size range. And the line height is higher and equal space is added on both sides.

The line-height attribute can be anything:

pixels;
inches;
points;
interest;
and others that are used in CSS.

You cannot specify a negative value. For example, if you enter a factor of one and a half, then you get the standard one and a half spacing in the text.

If you use percentages, keep in mind that 100% in line-height is equal to font-size.

In addition, you can specify the value normal or inherit. If you specify normal, then the distance between the lines will be calculated automatically by the browser at its discretion. The meaning may vary as it depends on the browser. It is recommended to set a specific number so that all users have the same.

Inherit means the value will be exactly the same as the parent element.

More detailed design

CSS line spacing is not really limited to just the above attributes. The spacing is also adjusted by the margin and padding attributes. If you specify the attribute exactly as margin = "5px", then a distance of 5 pixels will be added on all sides of the line (paragraph).

If you only need to specify above a paragraph, then you can specify a margin-top. The translation is very simple. Thus, it will be possible to set indents on each side.

Note that there is also a padding attribute. It works the same way as margin. You can set both a general indent and a specific direction (left, right, up, down).

Look closely at the picture above. Margin is the margin outside the object, and padding is inside.

These attributes are global. They can be applied to everything - pictures, tables, text, links, and so on.

Remember this once and for all. This is a very important point when designing objects. For example, thanks to margin, you can specify indents between text and images inside it. If these margins are absent, then the text will be placed close to the image.

If you have text in a table, then use padding to prevent the text from sticking to the edges of the table, as it looks ugly. And if you set an indent of at least 5 pixels, it will already look much better. In addition to height, the line has a width attribute.

Sometimes this is a very useful property. The picture below shows an example of different text widths.

Example of registration

When creating a website design, you always need to do so that the text is as readable as possible. If the user finds it difficult to read the text (it is too small or too large), he will simply close your site.

Try comparing the two paragraphs shown in the picture below. Which text is more convenient for you to read?

CSS line spacing is designed to make text easier to read. Also, keep in mind that different fonts may differ in their original height.

For clarity, you can check it in any editor. Let's compare several fonts.

Note that all fonts are written at 24 pixels. As you can see, they all differ in the height and width of the letters. If you compare the larger sizes, the difference will be more obvious.

CSS: line spacing in a list

The spacing setting applies to lists as well. In addition, the above-described margin and padding are characteristic of the list styles. This makes the lists prettier than the standard ones. Using all of these attributes, you can specify:

The height of the list items.
Indents for the text to the left.
Top and bottom line indents.
The maximum width of each item.

Conclusion

With this set of attributes, you can play with the design of not only the lines, but whatever you want. These are global parameters that absolutely all elements obey (the exception is font-size, since it is only for text).

If you have recently started working with the text editor "Word", then you may well not know how the formatting of all aspects changes in it. In this article we will talk only about one of them - we will tell you how to reduce the spacing between lines in the "Word". Agree, everyone wants the document they have written to look beautiful when printed, and such artifacts only destroy this beauty. Therefore, read the article to the end to know how to deal with them.

Extra paragraphs

Before reducing the spacing between lines in the "Word", it is recommended to first understand the paragraphs. In the sense that sometimes the user can put several instead of one paragraph. It is these actions that lead to the fact that there is a large white space between the lines.

To reduce the time spent searching for these nuances, you can use the visualization. This function is activated by clicking on the icon located on the toolbar. It is located in the "Home" tab and is indicated by the "¶" icon. By clicking it, you will be able to see all The paragraph in this case is also displayed by the symbol "¶".

Now you just have to find the extra paragraphs and delete them. This was the first way, but not the last, so let's move on to the second.

Spacing problem

The next way to shrink it is to change the style to No Spacing. However, this method is recommended only if the gap is very large and pronounced. The fact is that such a method can radically change all the formatting of your document, thereby ruining the work.

So, in order to remove large spacing between lines, you need to go to the "Home" tab and find a section called "Styles" there. In it, you must select the style "No spacing". If it is not on the panel, expand the section with the appropriate button.

If you have the latest version of "Word", then these manipulations must be done in the "Design" tab, in the "Document Formatting" section. The tool is called Paragraph Spacing.

We carry out a complete setup: open the "Paragraph"

Before that, we considered methods that do not provide completeness of actions, they could only change some formatting in a short time. But if you want to remove the space between the lines and not harm the entire document, then it is best to use the full setting. Right now we will talk about how to reduce the spacing between lines in the "Word" by using flexible formatting settings.

First, you need to select the area of the text that you are going to change. After that, go to the "Home" tab, and in it, in the "Paragraph" section, click on the icon with an arrow pointing to the lower right corner. The icon itself is located in the lower right corner of the section.

We carry out a full adjustment: set the value

As soon as you do this, the "Paragraph" settings window will appear in front of you. In it, immediately pay attention to the "Interval" section. It is in it that all the settings we need are carried out. You can change the spacing between paragraphs and between the lines of the paragraph itself. To do the first, use the counter next to the words "Before:" and "After:".

In the case when you want to completely remove the interval, put "0". If you want to remove the spacing between the lines themselves, then use the drop-down list on the right. You can use presets (single, 1.5 lines, double, minimum, exact and multiplier) or manually enter the value in the "value:" field.

So you have passed, so to speak, in Word training on the topic of how to reduce the spacing between lines.

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 spacing between the lines will be calculated as follows: 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 vertically.

Syntax

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

The values

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

Examples of

Example

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

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

The result of executing the code:

Example

Reduce the gap to 21px - 13px = 7px:

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

The 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 distance between lines of text will be line-height - font-size = 13px - 13px = 0px- the lines almost stick together (the tails of the letters of the upper line will touch the tails of the letters of the lower one):

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

The result of executing the code:

Example

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

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

The result of executing the code:

Example

Let's increase the multiplier:

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

The result of executing the code:

Example

If you do line-height less font-size, then the lines will generally fit on top of each other:

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

The result of executing the code.

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

Syntax

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

The values

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

Examples of

Example

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

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

The result of executing the code:

Example

Reduce the gap to 21px - 13px = 7px:

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

The result of executing the code:

Example

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

The result of executing the code:

Example

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

The result of executing the code:

Example

Let's increase the multiplier:

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

The result of executing the code:

Example

If you do line-height less font-size, then the lines will generally fit on top of each other:

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

The result of executing the code.

How to set line spacing in css. Change the spacing between paragraphs and lines in the Word text editor

Using line-height when changing spacing

Using padding when changing spacing

Negative line spacing

Change line spacing in lists

How to make text line spacing in CSS

More detailed design

Example of registration

CSS: line spacing in a list

Conclusion

Extra paragraphs

Spacing problem

We carry out a complete setup: open the "Paragraph"

We carry out a full adjustment: set the value

Syntax

The values

Examples of

Example

Example

Example

Example

Example

Example

Syntax

The values

Examples of

Example

Example

Example

Example

Example

Example

Top related articles