Crib: how to indent CSS text

The web-resource is estimated by users according to its external attractiveness. Therefore, even an informationally useful text may not be read due to the fact that it is poorly designed. Conclusion - you need to carefully and carefully approach not only to the semantic content of the pages of the site, but also to its visual representation. The advent of CSS technology has expanded the possibilities of creating attractive articles. One of the properties intended to facilitate the perception of what is written is the CSS text indent.

Margins and indents: what's the difference?

Before you begin to format the text, you need to understand what fields and indents are. In spite of the fact that these markup elements look the same for the user in a number of cases, there are fundamental differences between them:

• The field is set by the padding property, margin is margin ;
• The field is determined by the gap between the content and the border of the block, indentation - between the boundaries of neighboring blocks;
• Fields can both be taken into account in the dimensions of the element (width and height), and not.

The margin property

So, to specify the horizontal or vertical offset of the CSS text, use the margin construct. This property is applied to the

tag of the reference paragraph of the document. In the simplest case, it is written as:

Margin: 12px.

Such a line means that around the block of text (or any other block), an indentation of 12 pixels will be made on all sides. To increase the gap, for example, three times, it is enough to write down:

Margin: 36px.

But what if the interval between blocks should be different on each side? Developers of web pages use several forms of recording:

1. Margin: 11px 22px.
2. Margin: 11px 22px 33px.
3. Margin: 11px 22px 33px 44px.

In the first example, the indents of the lower and upper boundaries of the block are indented by 11 pixels, on the sides of the block - by 22 pixels. According to the second form of recording, between the top edge of the block and the content will be 11 pixels, between the bottom - 33 pixels, on the sides - 22 pixels. In the third case, the indent of the CSS text will have a value of 11 pixels from the top, 22 pixels to the right, 33 pixels from the bottom and 44 pixels to the left.

It is also possible to record the distance to the border of the block from only one side: margin-top, margin-bottom, margin-left, margin-right . Translating the names of properties into Russian, it's easy to guess their purpose. For example, the following entry indicates that the right margin will be 22 pixels:

Margin-right: 22рх.

For other parties, the distances around the block are assumed to be equal to the value of the parent element.

The margin property has a feature that the developer must remember when using the CSS text indent vertically. Intervals of neighboring elements are not stacked, but superimposed on each other. For example, let one of the blocks have a margin-bottom: 15px , and the margin-top block adjacent to it : 35px . School arithmetic and common sense suggest that the total spacing between them will be 50 pixels. In practice, this is not so. A block with a large margin will "absorb" its neighbor. As a result, the interval between the elements will be 35 pixels.

"Red line

Making out the document in a text editor, users prefer to set each new paragraph using the "red" line. With the help of CSS, the text indentation on the left is easy to do - the text-indent construct is used. It is written as follows:

Text-indent: 11px.

That is, the first line of the paragraph will be shifted relative to the left edge by 11 pixels. To make the text on the web page more like a document in the editor, you should additionally set the alignment to the width, that is, write:

Text-indent: 11px;

Text-align: justify.

In addition to pixels, when describing the markup, it is allowed to use other units - inches, points, percent. Let the block have a CSS text margin of 10%. With a block width of 500 pixels, the red line will be 50 pixels (10% of 500).

An inherit value can be set for this property. Such a record says that the block uses a similar property of the parent block.

Text-indent: inherit.

Surprisingly, the paragraph indentation can also take negative values! In this case, so-called projections are formed, that is, the main text remains in place, and the first line is shifted to the left by 22 pixels:

Text-indent: -22px.

To ensure that the letters do not cross the left border of the browser, in addition to the text-indent, you need to use the construct to set the field:

Padding-left: 22px.

Useful recommendations

The main CSS properties for text formatting are considered. And to consolidate them will help practice. Here are a few final tips on how to apply the material learned when developing websites:

• The red line and indentation of the text are different concepts, and different properties are used to specify them;
• For vertical indents, the rules of mathematics do not work - the intervals are superimposed, the element with a larger value "wins";
• A negative paragraph indentation is used to indicate the first line of the paragraph using the image.