A web resource is rated by users for its visual appeal. Therefore, even information-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 the semantic content of the pages of the site, but also its visual presentation. The advent of CSS technology has expanded the ability to create engaging articles. One of the features designed to make it easier to read is CSS indentation.
Margins and indents: what is the difference?
Before you start formatting text, you should understand what fields and indents are. Despite the fact that in some cases these markup elements look the same for the user, there are fundamental differences between them:
- the field is set by the padding property, indent - margin ;
- the field is determined by the gap between the content and the border of the block, the indent is between the borders of neighboring blocks;
- fields can both be taken into account in the size of the element (width and height), and not.
Margin property
So, to set the horizontal or vertical indentation of the CSS text, use the margin construct. This property applies to the <p> </p> tag of the paragraph that defines the document. In the simplest case, it is written as:
margin: 12px.
Such a line means that around a block of text (or any other block), 12 pixels will be indented on all sides. To increase the gap, for example, three times, just write:
margin: 36px.
But what if the interval between the blocks should be different on each side? Web developers use several forms of writing:
- margin: 11px 22px.
- margin: 11px 22px 33px.
- margin: 11px 22px 33px 44px.
In the first example, 11 pixels will be indented from the lower and upper boundaries of the block, and 22 pixels will be indented on the sides of the block. According to the second form of recording, there will be 11 pixels between the top edge of the block and the content, 33 pixels between the bottom, and 22 pixels on the sides. In the third case, the indentation of the CSS text will be 11 pixels above, 22 pixels to the right, 33 pixels below and 44 pixels to the left.
It is also possible to record the distance to the block border on only one side: margin-top, margin-bottom, margin-left, margin-right . Having translated the names of the properties into Russian, it is easy to guess their purpose. For example, the following entry indicates that the indent on the right will be 22 pixels:
margin-right: 22px.
For the other sides, the distances around the block are taken equal to the value of the parent element.
The margin property has a feature that a developer needs to remember when using vertical indentation of CSS text. The intervals of adjacent elements are not summed, but overlap. For example, let one of the blocks have margin-bottom: 15px , and the margin-top: 35px block adjacent to it from below. School arithmetic and common sense suggest that the total indent between them will be 50 pixels. In practice, this is not so. A block with a large margin value will “absorb” its neighbor. As a result, the interval between the elements will be 35 pixels.
"Red line
Making a document in a text editor, users prefer to specify each new paragraph using the "red" line. Using CSS, it is easy to indent the text on the left - the text-indent construct is used. It is written like this:
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 in width, that is, write:
text-indent: 11px;
text-align: justify.
In addition to pixels, in the description of the markup, the use of other units is also possible - inches, points, percent. Let the block indent CSS text equal to 10%. With a block width of 500 pixels, the red line will be 50 pixels (10% of 500).
This property can be set to inherit . Such a record says that the block uses a similar property of the parent block.
text-indent: inherit.
Surprisingly, indentation can take on negative values! In this case, the so-called protrusions 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.
In order for the letters not to go beyond the left border of the browser, in addition to the text-indent, you must use the construction to specify the field:
padding-left: 22px.
Useful Tips
The basic CSS properties for text formatting are discussed. And practice will help to consolidate them. Here are some final tips on how to apply the material you’ve learned when designing websites:
- the red line and text indentation are different concepts, and different properties are used to indicate them;
- for vertical indents, the rules of mathematics do not apply - intervals are superimposed, an element with a large value “wins”;
- negative paragraph indentation is used to indicate the first line of a paragraph using an image.