Description

Sets the amount of indentation from the right edge of the element. The padding is the distance from the outer edge of the current element's right border to the inner border of its parent element (Figure 1).

Syntax

margin-right: value | auto | inherit

Values

The amount of right padding can be specified in pixels (px), percentage (%) or other units acceptable for CSS. The value can be either a positive or negative number.

Auto Specifies that the amount of indentation will be automatically calculated by the browser.

inherit Inherits the value of the parent.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Rice. 2. Applying the margin-right property

Object model

document.getElementById("elementID ").style.marginRight

Browsers

Internet Explorer 6 doubles the left or right margin for floating elements that are nested within parent elements. The margin that is adjacent to the parent's side is doubled. The problem is usually solved by adding display: inline to the floated element.

Internet Explorer versions up to and including 7.0 do not support the inherit value.

In cascading style sheets, two properties are used to set indents - margin and padding. Let's figure out how they work.

Margin

We remember that the current block document model is currently in use. And for each of the blocks we can adjust the external indent from the edge of the page, or its parent element. It all depends on where in the html stream this block is located. We will be working with a DIV block.

• In css, the margin property for the outer margin can be set separately for each of the four sides of the block. The property has the following meanings:[meaning | interest | auto]
• - specify the indentation parameter as a number, as a percentage, or leave it at auto- in this option for specifying indentation, you can specify values ​​in one of four possible options. 1) Single value for each side. 2) First for the top and bottom of the block at the same time, then also for the right and left parts. 3) Here you set the indent from the top edge of the line or parent element, then simultaneously for the left and right parts of the block, and finally for the bottom. 4) Here, set the indents for each side in turn - up, right, bottom, left.

The margin property syntax looks like this:

Div ( margin: 10px 10px 10px 10px; margin-left:5%; margin-right: 0.8; margin-top: auto; margin-bottom: 15px; )

You can assign a margin to each side separately by explicitly specifying it in the margin property.

So, use this CSS property to set the indentation of an element from the edge of the page, line, block, or parent container.

Padding

A similar CSS property, it assigns padding to a block. With padding, you can set the padding from the content of a block to its border.

Values ​​are set similarly to the margin property. This is what the syntax looks like:

Div ( padding: 10px 10px 10px 10px; padding-left:5%; padding-right: 0.8; padding-top: auto; padding-bottom: 15px; )

We can use these two properties in the following situations:

1. Indentation between lines,k implemented via CSS
2. Page margin
3. For padding for any element

There are no similar materials.

April 5, 2016 at 6:32 pm

Arranging Margins and Padding in CSS

• Netcracker Blog,
• CSS
• HTML

In this article I would like to tell you how to correctly place fields(padding) and indentation(margin) in CSS.

First of all, let's remember the definition of margins and padding according to the W3C specification. In the box model, margins are the distance between the content and the border of the box. And padding is the distance between the border of a block and the border of an adjacent or parent element.

Thus, if the border and background of the element are not specified, then there is no difference, use the padding or margin property to set the indents, but provided that the width (width) and height (height) of the element are not specified and the algorithm for calculating content sizes using box-sizing properties.

In any case, remember that margins may or may not be included in the width or height of the element. Indents are always set outside the element.

Now let's look at how to correctly place margins and space between elements. Let's take the following block as an example.

This is the news block. It consists of a header, a list of news, and an “Other news” link. Let's give them the following class names: news__title, news__list and news__more-link.

Since each of these elements has the same left and right margins, it is better to set the margins to the parent block rather than setting the left and right margins for each element individually.

News ( padding: 20px 25px; )

Thus, if you need to change the value of the fields on the right and left, this will need to be done In one place. And when adding a new element inside the news block, it will already have the necessary indentations on the left and right.

It often happens that all elements within a block have the same padding on the left and right, except for one, which should not have padding at all, for example, due to the background. In this case, you can set negative padding for the element. Then you won’t have to remove fields inside the block for other elements.

Now you need to set the vertical margins between elements. To do this, you need to determine which of the elements is compulsory. Obviously, a news block cannot exist without a news list; at the same time, there may not be a “Other news” link; the title can also be removed, for example, when the design is changed.

Taking this into account, we set the indent at the bottom for the title, and the indent at the top for the “Other news” link.

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

We could achieve the same external result by adding padding at the top and bottom for the news list.

News__list ( margin: 10px 0 12px 0; )

Now you need to set the indents between individual news items. Again, please note that the number of news items may vary and there may only be one news item listed.

You can set a top indent for each news except the first one, or a bottom indent for each news except the last one. The first option is preferable because the:first-child pseudo-selector was added in the CSS 2.1 specification and has wider support, unlike the:last-child pseudo-selector, which was only added in the CSS 3.0 specification.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Thus, the correct placement of margins and indents allows you to flexibly change the appearance of any block without making changes to the styles and without disturbing the design. The most important thing is to determine which block elements are the main ones ( mandatory), and which ones optional.

Sometimes we cannot rely on required elements. For example, we have a popup window, inside of which some title and text can be displayed. Moreover, in some cases there may be no text, and in some cases there may be no title. That is, both elements are optional.

In this case, you can use the following method for setting indents.

Popup__header + .popup__text ( margin-top: 15px; )

Then the indentation will only appear if both elements are used. In the case of displaying only the title or only the text, there will be no extra indentation.

Collapsing vertical margins

Another nuance that not everyone knows about is related to the vertical spaces between adjacent blocks. The definition of indentation that I gave above says that indentation is the distance between borders current and neighboring blocks. Thus, if we place two blocks below each other and give one of them a bottom margin of 30px and the other a top margin of 20px, the margin between them will not be 50px, but 30px.

That is, indentations will overlap, and the indentation between blocks will be equal to the largest indentation, and not the sum of indentations. This effect is also called "collapse".

Please note that horizontal indents, unlike vertical ones, do not “collapse”, but are summed up. The fields (padding) are also summed up.

Knowing about the “collapse” of indents, we can use this feature to our advantage. For example, if we need to indent the headings and text inside an article, then for the first level heading we will set the bottom indent to 20px, and for the second level heading the top indent is 20px and the bottom is 10px, and for all paragraphs we set the top indent to 10px.

H1 ( margin-bottom: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )

Now the h2 heading can be placed either after the h1 heading or after the paragraph. In any case, the top margin will not exceed 24px.

General rules

To summarize, I would like to list the rules that I follow when arranging margins and indents.

1. If adjacent elements have the same padding, then it is better to set them to the parent container rather than to the elements.
2. When setting indents between elements, you should consider whether the element is required or optional.
3. For a list of similar elements, do not forget that the number of elements can vary.
4. Be aware of vertical padding and use this feature where it will benefit you.

Description

Sets the amount of padding from each edge of the element. The margin is the space from the border of the current element to the inner border of its parent element (Fig. 1).

Rice. 1. Indent from the left edge of the element

If the element does not have a parent, the padding will be the distance from the edge of the element to the edge of the browser window, taking into account that the window itself also has padding set by default. To get rid of them, you should set the margin value for the selector equal to zero.

The margin property allows you to set the margin value for all sides of an element at once or define it only for specified sides.

Syntax

margin: [value | interest | auto] (1,4) | inherit

Values

You can use one, two, three or four values, separated by a space. The effect depends on the number of values ​​and is shown in table. 1.

The amount of indentation can be specified in pixels (px), percentage (%) or other units acceptable for CSS. The value can be either a positive or negative number.

Auto Specifies that the amount of indentation will be automatically calculated by the browser.

inherit Inherits the value of the parent.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Rice. 2. Applying the margin property

Rice. 2. Applying the margin-right property

document.getElementById("elementID ").style.margin

document.getElementById("elementID ").style.marginRight

Internet Explorer 6 in quirk mode does not support centering a block using the margin: 0 auto rule. There is also a bug in this browser with doubling the left or right padding value for floated elements nested within parent elements. The margin that is adjacent to the parent's side is doubled. The problem is usually solved by adding display: inline to the floated element.

Internet Explorer 6 doubles the left or right margin for floating elements that are nested within parent elements. The margin that is adjacent to the parent's side is doubled. The problem is usually solved by adding display: inline to the floated element.

Note

For block elements located next to each other vertically, a collapsing effect is observed when the indents are not summed up, but combined with each other. The collapse itself acts on two or more blocks (one can be nested inside another) with indents at the top or bottom, while adjacent indents are combined into one. For left and right padding, collapsing is never applied.

Collapse does not work:

• for elements that have the padding property set on the collapsing side.
• for elements that have a boundary specified on the collapsing side;
• on elements with absolute positioning, i.e. those whose position is set to absolute ;
• on floating elements (for which the float property is set to left or right );
• for inline elements;
• For .

Today we will talk to you a little about the principles of layout, namely, about ways to organize indentation on your site for certain elements.

The element in question that needs to be indented could be text, an image, a table, or any other HTML element. The main thing is to follow some important rules, which I will tell you about now.

If you are just creating your site, then I recommend that you insert the following properties at the top of your main style file:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:before, *:after ( -webkit-box-sizing: border- box; -moz-box-sizing: border-box; box-sizing: border-box )

Why is this necessary, you ask? I answer your question with a clear example.

Let's say you have a layout element like this:

This is what the option will look like without using the properties described above (top element) and with their use (bottom element):

What can you see here? That the width of the element in the first version (without using properties) became larger than specified due to the added indents, which is not entirely convenient and correct in terms of layout.

The option with properties is much more aesthetically pleasing, but you should use it consciously, because when you add them to a ready-made site, you risk getting a bad design and a “headache” in the form of bringing it all into proper form. All the projects that I had the opportunity to lead from scratch were not without these properties.

And now, in fact, let’s talk about options for organizing indents for elements on your website with visual examples.

Padding using the CSS “padding” property

So that you understand the whole logic of things, let’s take as an example the following fragment of the layout:

with your own styles:

Test_div ( width: 250px; border: 1px solid; )

The visual version looks like this:

What is the property " padding"? It helps to organize the internal indentation in the specified elements. Let's add an internal padding of 10px to our layout:

Test_div ( width: 250px; border: 1px solid; padding: 10px; // Padding 10px )

Visually it looks like this:

The number 10 in the property means that inside the specified elements, on each of their four sides, you need to add a margin of 10px. Pixels (px) can be replaced with percentages or other CSS supported values.

There are two options indications of the sides from which indentations must be made.

First- this is with an explicit indication of the parties:

Padding-top: 10px; // 10px top padding-right: 10px; // 10px padding on the right padding-bottom: 10px; // Internal padding 10px from the bottom padding-left: 10px; // 10px left padding

In this case, each side uses its own property. AND second:

Padding: 10px 0 0 0; // Internal padding 10px on top, everything else - 0px padding: 10px 0; // Internal padding 10px on top and bottom, and on the sides - 0px padding: 0 10px; // Internal padding 0px top and bottom, and 10px on the sides

Here is a simple listing of values, each of which corresponds to its side. The sides are set like this: the first value is top, the second is right, the third is bottom and the fourth is left, that is, everything is clockwise.

If there are two values ​​(top and right), then this means that in mirror the same values ​​go down and to the left, and that’s the only way. Everything seems to be clear. If you do not need to set an indent for one of the sides, set the value for this side to “0”. I like this option better, since it is more compact, but in my endeavors I used the first option.

This type of indentation is good for separating text, table cell content, and other text information. To separate the elements themselves, similar to those in the example above, there is another property.

Margin using the CSS property “margin”

Distinctive feature of the property " margin" means that the indentation is added outside the element, that is, external.

There are also two options for adding here.

First– with an explicit indication of the party:

Margin-top: 10px; // 10px margin on top margin-right: 10px; // 10px margin on the right margin-bottom: 10px; // Margin 10px from bottom margin-left: 10px; // 10px left margin

Second– with a list of values, each of which corresponds to its side:

Margin: 10px 0 0 0; // Outer margin 10px on top, everything else - 0px margin: 10px 0; // Margin 10px on top and bottom, and on the sides - 0px margin: 0 10px; // Outer padding 0px top and bottom, and 10px on the sides

I won’t describe all the nuances of working with the rules here, everything is the same as about the property “ padding", written about him above.

We use margin with the following value:

Test_div ( width: 250px; border: 1px solid; margin: 10px; // Margin 10px )

Visually it will look like this:

As can be seen from the example, in this case an external margin is added to separate the specified elements.

Important Feature: If you looked closely at the result, you might have noticed that adjacent indents of elements do not add up. That is, if the first element has a bottom margin of 10px, and the second element has a top margin of the same value, then the total distance between them will also be 10px. If 10 and 15 respectively, then the total is 15 and so on.

This indentation option is often used in text, namely in the design of paragraphs, as well as in elements that have visible borders.

But both properties are not limited to just these elements. You choose the options for using them yourself, I just tried to give you the basics about them.