HTML Tutorials: CSS Line Spacing

CSS is very necessary for text layout. Any expert always uses them if he creates a beautiful website. Thanks to these attributes, you can perform any operations with text.

As a rule, most web designers do not like the default text layout in html. Line spacing CSS allows you to customize almost everything that you can imagine. And if you go deeper, you can do what you never thought of.

How to make text line spacing in CSS

It is important to understand that it is possible to set the size of lines, indents, etc. to all elements where there is text. For example, all of these attributes are great for:

  • paragraph;
  • lists;
  • <span>;
  • tables;
  • headers;
  • and everything else where you post text.

Considering the line spacing CSS, first of all pay attention to the following attributes.

css line spacing in the list

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

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

Line-height is the distance from the middle of the upper Leading to the middle of the lower Leading. Arrows all this is shown in the figure.

Note that if you specify a line height smaller than the font size, the lines will overlap each other. Be sure to follow this to avoid such a situation.

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. The figure below is a clear example of where symbols are used that extend up and down.

css line spacing

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

The value of the line-height attribute can be any:

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

You cannot specify a negative value. For example, if you specify a factor equal to one and a half, then you get a standard one and a half interval in the text.

If you specify in percent, then keep in mind that 100% in line-height is equivalent to the value of font-size.

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

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

More detailed design

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

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

Note that there is also an attribute of padding. It works exactly the same as the margin. You can set both the overall indent and the specific direction (left, right, up, bottom).

html css line spacing

Look carefully at the drawing above. Margin - indentation outside the object, and padding - inside.

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

line spacing css

Remember this once and for all. This is a very important point in the design of objects. For example, thanks to the margin, you can specify indents between the text and the pictures inside it. If these indents are not present, the text will be placed close to the image.

If you have text in the 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 already look much better. In addition to height, the line has an attribute width.

css text width and height

Sometimes it is a very necessary property. The figure below shows an example of different widths of text.

css text width

Design example

Creating a site design, you should always make the text as readable as possible. If the user finds it difficult to read the text (it is too small or too large), then it will simply close your site.

Try to compare the two paragraphs shown in the figure below. Which text do you prefer to read?

line spacing css

The CSS line spacing is designed to make text perception convenient. Also do not forget that different fonts may differ in their original height.

For clarity, you can check in any editor. Compare a few fonts.

Font sizes

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

CSS: line spacing in the list

Adjustment of intervals is applied in lists. In addition, in the styles of lists, the above described margin and padding are characteristic. Thanks to this lists become more beautiful than the standard. Using all these attributes, you can set:

  • The height of the list items.
  • Indent for text to the left.
  • Indents for lines above and below.
  • The maximum width of each item.

Conclusion

Owning such a set of attributes, you can play with the design of not only the lines, but everything you want. These are global parameters that absolutely all elements are subject to (the exception is font-size, since it is only for text).

Related news

HTML Tutorials: CSS Line Spacing image, picture, imagery


HTML Tutorials: CSS Line Spacing 45


HTML Tutorials: CSS Line Spacing 66


HTML Tutorials: CSS Line Spacing 16


HTML Tutorials: CSS Line Spacing 39


HTML Tutorials: CSS Line Spacing 64


HTML Tutorials: CSS Line Spacing 99


HTML Tutorials: CSS Line Spacing 76