How to change the distance between paragraphs of text?

When using the tag

Indents are automatically added above and below the text paragraph. This is done in order to visually separate one block of text from the next. It is clear that the default indentation values ​​are not always satisfactory, so sometimes they have to be reduced or increased. To do this, you can use the universal property margin , it determines the indents on all sides of the paragraph or margin-top for the indent at the top and margin-bottom for the indent at the bottom.

With the advent of CSS indent management properties, web developers have enormous opportunities to manage the interface and design of website pages. Previously, indentations were managed using tables, which was much more complex and voluminous.

Let's look at the basic properties of absence management.

Managing margins in HTML using CSS using the margin property

css property margin allows you to control exactly external margins. Let's say there is an image for which you need to specify external margins: 30 pixels on top, 20 on the left, 10 on the right and 5 on the bottom.

To set the margin at the top we will write: margin-top: 30px

To set the left margin: margin-left: 30px

Right margin: margin-right: 10px

And bottom: margin-bottom: 5px

You can combine everything by writing the following: margin: 30px 10px 5px 20px;

For example, let's set these paddings for an image. We get the following html code:

You can see how the image has shifted relative to the parent element.

If you enter margin: 30px, then the css margins will be the same on all four sides and will be equal to 30 pixels.

Eat options instructions two and three values in the specification: margin:10px 20px;. This parameter will make sure that the external margins on the css appear at the top and bottom 10px, left and right 20px;

Often for beginning layout designers it is not always possible to immediately remember all possible combinations, so in the initial stages you can use the following parameters: margin-top, margin-right, margin-left and margin-bottom. Top - up, right-right, left-left, bottom-bottom.

CSS layout has always been rectangular. Any smooth lines are the competence of the developer. Style rules provide enough options to give the page a smooth shape within the confines of the screen resolution. But any layout element is always a rectangle in which the arrangement of information is governed by CSS rules.

All-side padding is important for every page element when it's absolutely positioned, and CSS top padding is specifically defined because it matters for different elements, especially inline ones.

Basic positioning rules

A block element has a margin rule, a padding rule for the elements inside it, and a border width that can also be used.

The indentation at the top is of particular importance. CSS within a block associates padding rules with rules for absolutely and relatively positioned elements within that block.

A common practice for CSS rules: you can specify the same padding on all sides, in pairs top/bottom and right/left, or for each side separately. For example,

• margin: 10px;
• padding: 10px20px;
• padding: 10px20px30px40px.

In the first case, the indentation of the element from the sides of the outer container in which it is located is set. In the second case, the margins at the top and bottom are 10px, on the left and right - 20px. In the third case, the size of the indents is indicated on all sides: top, right, bottom and left.

In all these cases, the indentation top CSS is 10 px.

Rules that change the position of elements

If a layout element is not positioned absolutely, it is positioned in the general order of page formation.

If we define padding on top CSS in the scCurrInfo element, the goal will be achieved, but if at the li level it will not.

In this example, using the padding rule: 40px; requires an adequate reduction of the width and height rules by 80px. Otherwise, the size of the scCurrInfo block will exceed the boundaries of the outer block.

If we remove the padding rule from the scCurrInfo description, but add it with a value of 20px to the list item style description, we will only get top indent. CSS will not apply this value to other parties.

Naturally, this use of the indentation rule applies to each li element.

General Content Formatting Practices

Some developers achieve perfection by laying out pages using block elements. Apparently, this is a classic practice - to start with tables and end your own educational process with blocks.

The freedom inherent in block layout is fascinating, and the developer’s imagination may not be limited by strict table rules: only rows, only cells, merging only horizontally and vertically. Nothing peculiar to relational ideas.

Meanwhile, tables, in addition to the obvious disadvantages, have many qualitative advantages. When creating padding at the top, CSS takes into account the padding on the left, right (bottom is a special moment). Table cell rules allow you to control both vertical and horizontal alignment. Using row styles and combining them with cell styles, you can create complex views of content.

The usual representation of a page in the form of rectangles does not at all prevent it from being presented in the form of a table. These are also rectangles, but they are also table cells, that is, they have their own rules that complement the rules of blocks.

Absolute positioning

Block with the rule POSITION: absolute ; will be located at a location determined by its coordinates relative to the block in which it is located.

A characteristic feature of CSS rules is that “practice is the best criterion of truth” in most cases, especially when cross-browser compatibility is required and layout is done manually, preferable to studying full-fledged manuals on cascading style sheets.

Using tables often results in cell content shifting issues. A similar offset within a block does not always affect all elements. By experimenting, you can achieve the desired result. A trivial task: how removing top padding is not always a trivial solution for CSS.

In some cases, when you have to layout page elements in the bowels of some popular website content management system, you still need to pay attention not only to experimental practice, but also to look at the experience of your colleagues.

Task

Remove padding around bulleted or numbered lists.

Solution

Use a margin and padding style property with a null value for the UL or OL selector, depending on the list type, as shown in Example 1.

Example 1: List indentation

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Crocodile Gena
• Shapoklyak

The result of this example is shown in Fig. 1.

Rice. 1. List without vertical and horizontal indents

Notice that list markers that appear off the left edge of the web page disappear. To remove only the top and bottom margins without moving the list to the left, use the margin-top and margin-bottom properties (example 2).

Example 2: List indentation

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Crocodile Gena
• Shapoklyak

Hello, dear readers of the blog site! Today we will continue learning about Cascading Style Sheets or CSS. In previous articles, we have already examined in general terms the block layout of the site. As a result, we began to have quite professional web pages, but they were missing something. But they most likely lack indents and frames. Today we will look at the style rules of margin, padding and border, which allow you to set indents and frames for html elements.

CSS Padding Options

With the help of cascading style sheets, it is possible to set two types of indents.

1.Indentation is the distance from the imaginary border of the element to its content. The distance value is specified using the parameter padding. This indentation belongs to the element itself and is located inside it.

2. Margin— the distance between the border of the current element of the web page and the borders of neighboring elements or the parent element. The size of the distance is controlled by the property margin. This indentation is located outside the element.

For clarity, picture:

For example, consider a cell filled with text. Then the padding is the distance between the imaginary border of the cell and the text it contains. And the outer margin is the distance between the borders of adjacent cells. Let's start with padding.

Padding in CSS using padding (top, bottom, left, right)

The padding-left, padding-top, padding-right and padding-bottom style properties allow you to set the padding values, respectively, on the left, top, right and bottom of a web page element:

padding-top | padding-right | padding-bottom | padding-left: value | interest | inherit

The amount of indentation can be specified in pixels (px), percentage (%) or other units acceptable for CSS. When specifying percentages, the value is calculated from the width of the element. The inherit value indicates that it is inherited from the parent.

For example, for the current paragraph, I applied a style rule that sets the left padding to 20 pixels, the top padding to 5 pixels, the right padding to 35 pixels, and the bottom padding to 10 pixels. The rule entry will look like this:

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Composite padding rule allows you to specify indents on all sides of a web page element at once:

padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

A prefab rule allows one, two, three, or four values ​​to be used, separated by a space. In this case, the effect depends on the number of values:

• if you specify one value, it will set the amount of indentation on all sides of the page element;
• if you specify two values, the first will set the amount of indentation at the top and bottom, and the second - at the left and right;
• if you specify three values, then the first will determine the amount of indentation at the top, the second - on the left and right, and the third - on the bottom;
• if four values ​​are specified, the first will set the amount of indentation at the top, the second at the right, the third at the bottom, and the fourth at the left.

Thus, the CSS rule above can be shortened as much as possible and written as follows:

p.test( padding:5px 35px 10px 20px)

The margin property or margins in CSS

The margin-left, margin-top, margin-right and margin-bottom style attributes allow you to set the margin values, respectively, left, top, right and bottom:

margin-top | margin-right | margin-bottom | margin-left:<значение>|auto|inherit

As mentioned above, the margin is the distance from the border of the current element to the border of the adjacent element, or, if there are no neighboring elements, to the internal border of the parent container.

The amount of indentation can be specified in pixels (px), percentage (%) or other units allowed for CSS:

p(
margin-left: 20px;
}
h1(
margin-right:15%;
}

The value auto means that the indent size will be automatically calculated by the browser. If you use percentage notation, the indentations are calculated depending on width of the parent container. Moreover, this applies not only to margin-left and margin-right, but also for margin-top and margin-bottom, percentage margins will be calculated depending on the width, not the height, of the container.

It is permissible to use as values ​​of external indents negative values:

p(
margin-left:-20px;
}

If, with positive values ​​of indentation, neighboring elements are moved away, then with a negative value, the neighboring block will collide with the element for which we have set such a negative indentation.

We can also specify padding using the style attribute margin. It sets the indentation values ​​simultaneously on all sides of a web page element:

margin:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

When specifying one, two, three or four padding values, this property obeys the same laws as the padding rule.

Border Options Using the Border Property

When setting frames, there are three types of parameters:

• border-width — border thickness;
• border-color — border color;
• border-style — the type of line with which the frame will be drawn.

Let's start with the frame thickness parameter:

border-width: [value | thin | medium | thick] (1,4) | inherit

Frame thickness can be specified in pixels or other units available in CSS. The thin, medium and thick variables set the border thickness to 2, 4 and 6 pixels, respectively:

border-width:medium;

As with the padding and margin properties, the border-width parameter allows one, two, three, or four values, thus setting the width of the border for all sides at once or for each side separately:

border-width: 5px 3px 5px 3px

For the current paragraph, make the thickness of the top border 1px, right 2px, bottom 3px, and left 4px using the rule (border-width: 1px 2px 3px 4px;)

Using the style attributes border-left-width, border-top-width, border-right-width and border-bottom-width, you can set the thickness of the left, top, right and bottom sides of the border, respectively:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick|<толщина>|inherit

The next parameter is border-color with which you can control frame color:

border-color: [color | transparent] (1,4) | inherit

The property allows you to set the border color for all sides of the element at once or only for the specified ones. As a value, you can use the methods for specifying colors accepted in HTML: hexadecimal code, keywords, etc.:

p (border-width: 2px; border-color: red)

transparent sets the transparent border color, and inherit inherits the value of the parent. By default, if the border color is not specified, the one used for the font inside the element will be used.

Using the border-left-color, border-top-color, border-right-color and border-bottom-color style attributes, you can set the color of the left, top, right and bottom sides of the border, respectively:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|inherit

And the last parameter border-style specifies frame type:

border-style: (1,4) | inherit

The frame type can be specified for all sides of an element at once or only for those specified. You can use multiple keywords as values. The appearance will depend on the browser used and the thickness of the frame. Meaning none is used by default and does not display a frame and its thickness is set to zero. The hidden value has the same effect. The resulting frame for other values, depending on the thickness, is shown in the table below:

The style attributes border-left-style, border-top-style, border-right-style and border-bottom-style specify the style of the lines that will be drawn on the left, top, right and bottom sides of the border, respectively:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

As with the padding and padding options, there are generic border property. It allows you to simultaneously set the thickness, style and color of the border around an element:

border: | inherit

The values ​​can be in any order, separated by spaces:

td (border: 1px solid yellow)

To set a border only on certain sides of an element, there are the border-top, border-bottom, border-left, border-right properties, which allow you to set parameters for the top, bottom, left and right sides of the frames, respectively.

All that remains is to summarize:

• for the task padding we use the property padding;
• for settings margins there is a rule margin;
• frame parameters are specified using the attribute border.

I note that all these CSS properties increase the size of the web page element. Therefore, if we change the thickness of the border or the size of the padding of the block containers that form the design of the web page, we will have to change the size of these containers accordingly, otherwise they may move and the design will be broken.

That's all, see you next time!