What is the difference between padding and margin. margin or padding? Thinking about what and where to use. We reduce to two values

Let me tell you right now, this is a very important lesson. After studying it, you will be able to arrange elements on the page, set indents between them, create them inside a separate specific block, set margins.

padding

Padding is a property that sets the amount of padding an element has from the inner edge of the border to the content. The content can be plain text, an image, or a child element that can also have its own margins.

Units can be pixels (px) or percentages (%).

#block(
padding: 12px /* padding from the block borders to the content - there will be 12 pixels on all sides */
}

It is possible to specify a field only on one specific side:

padding top- a property that creates margins on top.
padding right- a property that creates fields on the right.
padding-bottom- property that creates bottom margins.
padding-left- a property that creates margins on the left.

#block(
padding-bottom: 25px /* bottom margin 25px */
padding-left: 15px; /* left margin 15px */
}

As you noticed, if you specify fields from 2 or 3 sides in this way, you will get a long code. There is a shorthand notation for the padding property for this. All 4 values ​​​​are indicated in turn in it - from each edge in one line, the movement goes clockwise, starting from the top:

Padding: Top Padding Right Padding Bottom Padding Left;

#block(
padding: 25px 10px 15px 6px; /* top 25px, right 10px, bottom 15px, left 6px */
}

margin

The margin property, unlike padding, sets the amount of padding between the borders of elements.
If the element is a child, then the padding is the space from the element's border to the inner edge of the parent's border.
If the element has no parent, then the indentation is considered to be the free space set by the property to the edges of the border of the surrounding elements.

#block(
margin: 4px
}

To specify indents only on certain sides, the following properties exist:

margin-top- a property that creates indents from above.
margin-right- a property that creates indents on the right.
margin-bottom- property that creates indents from below.
margin-left- a property that creates indents on the left.

Like the padding property, margin also has the ability to shorthand values ​​for different sides. Movement goes clockwise, from the top margin:

Margin: Top Margin Right Margin Margin Bottom Margin Left;

#block(
margin: 15px 10px 5px 25px; /* top 15px, right 10px, bottom 5px, left 25px */
}

Thank you for your attention!

Description

Sets the value of the margins around the element's content. A margin is the distance from the inner edge of an element's frame to an imaginary rectangle that bounds its content (Figure 1).

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

Syntax

padding: [value | percent] (1, 4) | inherit

Values

It is allowed to use one, two, three or four values, separating them with a space. The effect depends on the number of values ​​and is given in Table. one.

Margins can be specified in pixels (px), percentages (%), or other CSS-friendly units. The inherit value indicates that it is inherited from the parent. When specifying a margin as a percentage, the value is calculated from the width of the element's parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Rice. 2. Applying the padding property

Object Model

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

Browsers

Internet Explorer up to version 7.0 does not support the inherit value.

In the previous chapter, we mentioned CSS properties such as margin (field) and padding (indent). Now we will dwell on them in more detail and consider how they differ from each other and what features they have.

You can create gaps between elements in both ways, but if padding is the indent from the content to the edge of the block, then margin is the distance from one block to another, the inter-block space. The screenshot shows a good example:

Padding separates content from the block border, while margin creates gaps between blocks

As you can see, CSS margins and padding are different, although sometimes without looking at the code it is impossible to determine which property is used to set the distance. This happens when there is no frame or background for the content block.

To set margin or padding in CSS from each side of an element, there are the following properties:

Indents:

• padding top: meaning;
• padding-right: meaning;
• padding-bottom: meaning;
• padding-left: meaning;

Fields:

• margin-top: meaning;
• margin-right: meaning;
• margin-bottom: meaning;
• margin-left: meaning;

Values ​​can be specified in any CSS unit - px, em, %, etc. Example: margin-top: 15px .

There is also a very handy thing like CSS shorthand for margin and padding. If you need to set margins or padding for all four sides of an element, it is not necessary to write a property for each side separately. Everything is made simpler: for margin and padding, you can specify 1, 2, 3 or 4 values ​​​​at once. How the settings are distributed depends on the number of values:

• 4 values: padding is set for all sides of the element in the following order: top, right, bottom, left: padding: 2px 4px 5px 10px;
• 3 values: padding is set first for the top side, then both for the left and right, and then for the bottom: padding: 3px 6px 9px;
• 2 values: padding is set first simultaneously from the top and bottom sides, and then - simultaneously for the left and right sides: padding: 6px 12px;
• 1 value: set the same padding for all sides of the element: padding: 3px;

The same rules apply to the CSS margin property. Note that you can also use negative values ​​for margin (for example, -3px), which can sometimes be quite useful.

collapsing margin

Imagine the situation: two block elements are on top of each other and they are given margins. The top block is set to margin: 60px and the bottom block is set to margin: 30px . It would be logical to assume that the two bordering margins of two elements would simply touch, and as a result, the gap between the blocks would be 90 pixels.

However, things are different. In fact, in such a situation, an effect is manifested, which is called collapse, when the largest in size is selected from two adjacent element fields. In our example, the resulting gap between elements will be 60 pixels.

Collapsed margins only work for the top and bottom margins of elements, and do not apply to margins on the right and left sides. The final value of the gap is calculated in different situations in different ways:

• When both margin values ​​are positive, the final margin size will be the larger value.
• If one of the values ​​is negative, then the sum of the values ​​must be obtained to calculate the field size. For example, with values ​​of 20px and -18px, the field size will be:
  20 + (-18) = 20 - 18 = 2 pixels.
• If both values ​​are negative, the modulus of these numbers is compared and the number with the greater modulo is selected (hence the smaller of the negative numbers). Example: you want to compare the values ​​of fields -6px and -8px . The modules of the compared numbers are 6 and 8, respectively. It follows that 6 -8 . The final field size is -8 pixels.
• In the case when the values ​​are specified in different CSS units, they are reduced to one, after which they are compared and the larger value is selected.
• The size of the margin for child elements is even more interesting: if the child has a larger margin than the parent, then priority is given to it. In this case, the sizes of the top and bottom margins of the parent will become the same as set for the child. In this case, there will be no distance between the parent and the child.

Shastaya on the forums came across the fact that the question still arises, what does padding, and what margin and what are the differences between them. That is why I decided to remind about it. So, without resorting to abstruse phrases, let's set the task and analyze an example on which everything will become clear.

Task: On the page need a red block(200x200 pixels), which recedes from the edges of the browser top and left by 40 and 70 pixels respectively, and the text inside which indents from the left and top by 40 pixels.

Solution: look at the picture and the code. Our red block should not exceed 200 by 200 pixels, and it should be padded from the edges of the browser (or other content blocks). Actually, we do these indents through margin. If we do padding, then the padding happens inside our red block and the padding is obtained with the background of the block itself (that is, red).

In addition to the properties used (lines 6-9), there are also the properties margin-right, padding-right, margin-bottom, padding-bottom - they are for indents to the right and bottom, respectively. The values ​​of all these properties can be in pixels (px), percentages (%), or in em units.

Basically, that's it. However, there are some other features of working with them.

Features of margin and padding

When using padding, the padding's dimensions must be subtracted from the block's height and width, otherwise the block's size will increase by the padding's size.

If you set margin-left and margin-right with auto values ​​for some block, then if the block has a fixed width (for example 400px) and there is no float CSS property, then this block will be aligned to the center of the element in which it is located. Actually for non-rubber layout with center alignment, this alignment method is usually used. Even though IE 5.5 and earlier don't support the auto value, it still doesn't stop you from using it all the time=).

It is not recommended to use padding and margin in tables because the effect will be unpredictable in different browsers.

And the last thing I wanted to say. Don't forget to use shorthand post constructs like margin: 10px 0 5px 20px;. If the indent is zero, then you can simply put a zero, without specifying parameters. Remembering which of the parameters belongs to which border is very simple - for the block, the indents go clockwise: the first number is on top, the second is on the right, the third is on the bottom, the fourth is on the left.

That's actually all I wanted to tell you today. Happy weekend everyone!

This guide will help you better understand CSS properties like border, padding, and margin. These properties are very helpful for developers to position elements on the page according to the layout.

Let's create a div and give it the margin, padding and border properties.

Padding Property

The padding CSS property defines the distance between an element's border and its content. You can define it like this:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px
• padding-left: 10px

This entry can be shortened:

• padding:25px 50px 75px 100px;
  • top 25px
  • right 50px
  • bottom 75px
  • left 100px
• padding:25px 50px 75px;
  • top 25px
  • right and left 50px
  • bottom 75px
• padding:25px 50px;
  • top and bottom 25px
  • right and left 50px
• padding:25px;
  • all 25px

Note: The padding value is added to the element's width and depends on the element's background.

In other words, we have a div element with a class of div-1:

Div.div-1( width:150px; padding: 25px;)

The browser will add left and right padding to the width of the element. As a result, we will get an element with a width of 200px.

Border property

The CSS border property allows you to define the style and color of an element's border.

border-width

The border-width property is used to determine the width of the border. The width is specified in pixels or using one of the predefined values: thin (thin), medium (medium) or thick (thick).

border color

The border-color property is used to define the color of the border. The color can be set in the following ways:

• name - the name of the color, for example, "red"
• RGB - defines an RGB value, for example "rgb(255,0,0)"
• Hex - defines a hex value, for example, "#ff0000"

border style

• dotted: Defines a precise border
• dashed: Defines a dotted border
• solid: Defines a thick border
• double: Defines two borders. The distance between them depends on the value of border-width
• groove: Defines a three-dimensional indented border
• ridge: Defines a 3D raised border
• inset: Defines the border so that the block wobbles indented
• outset: Defines the border so that the block wobbles convex

You can write the border properties of an element in a shorthand way:

Div.div-2( border:1px solid #ccc; )

Margin Property

The CSS margin property defines the spacing around an element. Margin frees up some space around the element (outside of the border). Margin has no background color and always remains transparent.

You can define margin values ​​for an element like this:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

This entry can be shortened:

• margin:25px 50px 75px 100px;
  • top margin 25px
  • right margin 50px
  • bottom margin 75px
  • left margin 100px
• margin:25px 50px 75px;
  • top margin 25px
  • right and left margin 50px
  • bottom margin 75px
• margin:25px 50px;
  • top and bottom margin 25px
  • right and left margin 50px
• margin:25px;
  • all four margin 25px

By using the default margin values ​​you can center the box horizontally.