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
Description | Example | |
---|---|---|
<тип> | Indicates the type of the value. | <размер> |
A && B | The values must be output in the order specified. | <размер> && <цвет> |
A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
A || B | Each 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
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
Syntax
Pre (-moz-tab-size: 16;) /* Firefox */ pre (-o-tab-size: 16;) /* Opera 10.6-12.1 */ pre (tab-size: 16;)
CSS is very necessary for styling text. Any specialist always uses them if he creates a beautiful website. Thanks to these attributes, you can perform any operations with text.
As a rule, most layout designers do not like the default text formatting in html. CSS line spacing allows you to customize just about anything you can imagine. And if you go deeper, you can do something that never even occurred to you.
How to add line spacing to text in CSS
It is important to understand that you can set line sizes, indents, etc. to all elements that contain text. For example, all of these attributes are great for:
- paragraph;
- lists;
- ;
- tables;
- headers;
- and everything else where you place text.
When considering CSS line spacing, the first things to look for are the following attributes.
In Photoshop there is a concept called Leading. There is no such attribute in CSS, but thanks to it you can clarify the point. Leading is in fact the distance between lines.
IN CSS size lines are specified by the line-height and font-size parameters. As you can see, the figure clearly indicates that font-size is the font size. Not a single letter ever goes beyond these limits.
Line-height is the distance from the middle of the upper Leading to the middle of the lower Leading. All this is indicated by arrows in the figure.
Please note that if you specify a line height less than the font size, the lines will overlap each other. Be sure to keep an eye on this so that such a situation does not happen.
Some people think why the font-size is stretched lower than the line with the letters. It's simple. After all, there are letters that are lower than the main level of the line. Below in the picture - clear example, which uses up and down symbols.
As you can see, the letters occupy the entire font-size range. And the line height is greater, and equal space is added on both sides.
The value of 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 specify a multiplier of one and a half, then you will get standard one and a half spacing in the text.
If you specify as a percentage, then keep in mind that 100% in line-height is equivalent to the font-size value.
In addition, you can specify the value normal or inherit. If you specify normal, the distance between lines will be calculated automatically by the browser at its discretion. The meaning may vary depending on the browser. It is recommended to set a specific number so that all users have the same number.
Inherit means that the value will be exactly the same as the parent element.
More detailed design
CSS line spacing is actually not limited to just the above attributes. The distance can also be adjusted using 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 need to specify only above the paragraph, then you can specify margin-top. The translation is very simple. This way you can set indents on each side.
Please note that there is also a padding attribute. It works exactly the same as margin. You can set both a general indentation 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 anything - pictures, tables, text, links, and so on.
Remember this once and for all. This is very important point when designing objects. For example, thanks to margin, you can specify the indents between the text and the images inside it. If these indentations are not present, 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 this looks ugly. And if you set an indent of at least 5 pixels, it will look much better. In addition to height, a line has a width attribute.
Sometimes this is a very necessary property. The figure below shows an example of different text widths.
Design example
When creating a website design, you should always make sure that the text is as readable as possible. If the text is difficult for the user to read (it is too small or too large), then he will simply close your site.
Try comparing the two paragraphs shown in the image below. Which text is more convenient for you to read?
CSS line spacing is designed to make text easier to read. Also remember that different fonts may differ in their original height.
For clarity, you can check it in any editor. Let's compare several fonts.
Please 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 larger sizes, the difference will be more obvious.
CSS: List line spacing
The interval setting also applies to lists. In addition, list styles are characterized by the margin and padding described above. Thanks to this, the lists become more beautiful than standard ones. Using all these attributes, you can set:
- The height of the list items.
- Indentation for text on the left.
- Indents for lines at the top and bottom.
- The maximum width of each item.
Conclusion
Having such a set of attributes, you can play with the design of not only the lines, but also anything you want. These are global parameters to which absolutely all elements are subject (the exception is font-size, since it is only for text).