home » Questions » Padding 0.0.0 0 which means. Padding, Margin and Border - we set internal and external margins in CSS, as well as borders for all sides (top, bottom, left, right). Use correct units

Padding 0.0.0 0 which means. Padding, Margin and Border - we set internal and external margins in CSS, as well as borders for all sides (top, bottom, left, right). Use correct units

Description

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

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

Syntax

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

The 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 \u200b\u200band is shown in table. 1.

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

HTML5 CSS2.1 IE Cr Op Sa Fx

padding

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.

Result this example shown in fig. 2.

Figure: 2. Applying the padding property

Object Model

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

Browsers

Internet Explorer 7.0 or later does not support the inherit value.

In the previous chapter, we mentioned CSS properties such as margin and padding. 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 either way, 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, interblock space. The screenshot shows an illustrative example:

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

As you can see, CSS margins and padding are different, although sometimes without looking at the code, you cannot determine with which property the distance is set. This happens when the border or background of the content box is missing.

The following properties exist to set margins or CSS padding from each side of an element:

Indentation:

padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

Fields:

margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;

Values \u200b\u200bcan be specified in any CSS units - px, em,%, etc. Example: margin-top: 15px.

There is also a very convenient thing like shorthand for margin and padding CSS... If you need to set margins or padding on all four sides of an element, you don't have to write the property for each side separately. Everything is made easier: for margin and padding, you can specify 1, 2, 3 or 4 values \u200b\u200bat once. The number of values \u200b\u200bdetermines how the settings are distributed:

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

The same rules apply to the CSS margin property. Note that negative values \u200b\u200bcan also be used for margins (for example, -3px), which can be quite useful sometimes.

Collapsing margin

Imagine a situation: two block elements are on top of each other and have 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 two bordering fields of two elements will simply touch and, as a result, the gap between the blocks will be equal to 90 pixels.

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

The distance between blocks is equal to the larger of the values

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

When both margin values \u200b\u200bare positive, the resulting margin will be equal to the larger value.
If one of the values \u200b\u200bis negative, then the sum of the values \u200b\u200bmust be obtained to calculate the field size. For example, with values \u200b\u200bof 20px and -18px, the field size will be:
20 + (-18) \u003d 20 - 18 \u003d 2 pixels.
If both values \u200b\u200bare negative, the absolute values \u200b\u200bof these numbers are compared and the number that is larger in absolute value (hence, the smaller of negative numbers). Example: You need to compare the values \u200b\u200bof the fields -6px and -8px. Modules of the compared numbers are 6 and 8, respectively. Hence it follows that 6 -8. The final field size is -8 pixels.
In case the values \u200b\u200bare specified in different units CSS, they are reduced to one, after which they are compared and the higher value is selected.
The size of the child's margin is even more interesting: if the child has a larger margin than the parent, then it takes precedence. In this case, the size of the parent's top and bottom margins will be the same as set for the child. In this case, there will be no distance between parent and child.

Today we will work on understanding the difference between HTML padding ( inner padding) and margin (padding) in CSS. But first, let's figure out their syntax. There are several ways to write these properties: regular and shorthand:

Padding and Margin in CSS

The usual notation for the properties in question is easier to understand because it is similar to all other style notations:

Regular entry:

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

On the other hand, CSS shorthand combines all of these properties into one common property called "padding".

Brief entry:

padding: 10px 20px 40px 10px;

Padding and margin have four values: top, right, bottom, and left. The shorthand shown above also specifies four values, separated by a space. The first of the four values \u200b\u200bis the top padding, then the right, bottom HTML and left padding:

padding: TOP RIGHT BOTTOM LEFT; (padding: top right bottom left)

This entry can be abbreviated to three values \u200b\u200bif the left and right padding / margins are the same. For example, if the top padding is 30px, the left and right are 10px, and the bottom is 40px, then you can use the following notation:

padding: 30px 10px 40px;

Reduce to two values!

If the top and bottom padding / margins are the same, and the right and left padding / margins are the same, then only two values \u200b\u200bcan be specified. In this example, we have a top and bottom padding of 10px, and a left and right padding of 20px. Our CSS will look like this:

padding: TOP / BOTTOM RIGHT / LEFT; (padding: top / bottom right / left) padding: 10px 20px;

Only one meaning!

Our latest version shorthand for padding and margin HTML contains only one value. This entry can be used when all indentation ( top, bottom, right and left) have the same meaning. If we wanted all sides to have 20px padding, then the CSS would look like this:

When to use which recording format? For example, if I only need to set the bottom padding to an element, I will use the usual notation, since I only need to apply the property to one side: padding-bottom: 30px;

How to work with PADDING and MARGIN

There is a tangible difference between these two properties. Padding is used to set space inside the container of an HTML element. Margin is used to set the space around the outer border of elements.

Imagine padding putting a winter coat on you. The coat is part of you, but if I threw paint at you, it would cover a wider surface than if you weren't wearing that coat.

You can also think of padding as filler in a cardboard box. When you fill the box with Styrofoam, you keep the contents away from the edges of the box. Padding in CSS does the same.

Now think of margin as an invisible force field around you. The force field shields other things from you. Going back to the coat and paint example, if I threw paint at you and it was able to pass through the force field, it would still only cover you and your coat.

PADDING and MARGIN on the example of the site

Let's look at properties using examples with elements. We'll start with a paragraph (tag

), then add a background color to it and add a 30px padding on each side.

Below on the left you can see that this is a paragraph with a padding of 30px around it. In the image on the right, I used the tools Google chrome to show where the HTML padding starts / ends for this element. The green color in the image below is the padding around the container. A dark blue background color fills the inner area:

Now let's add a margin to the paragraph. I'll add 30px top and bottom padding, and 20px left and right padding. The image below on the left shows how this paragraph changed from margin. The actual width of the image has become smaller, because the margin pushes the other from the borders HTML element... On the right, you can see that orange is the margin around the element. the margin is always outside the padding and the dark blue background does not extend to the margin area:

If you are still confused about how to use HTML padding and margin, then it's time to experiment! The more you use CSS properties and change their values, the better you will understand how they work.

Translation of the article “ CSS PADDING VS. MARGIN AND HOW TO USE THEM”Was prepared by the friendly project team.

Good bad

Tutorial

The purpose of this article is not to complicate simple things, but to focus on well-known standards, which for some reason are forgotten. It is important to maintain a meaningful structure in all aspects of your layout, and it is equally important to adhere to it in indentation. And one of the basic principles of layout is flexibility. Namely, the ability to easily make any changes without breaking anything. Proper handling of margin and padding plays a very important role in this matter.

The following principles are carried out in the environment for positioning elements on the page. The decor elements are also performed. But not so categorically.

Basic principles:

The indentation is given to the last possible element in the house.
Indents cannot be set for independent elements (BEM block).
For the last element of the group, the indentation is zeroed (always).

Indents go from the previous element to the next.

margin (s) are given from the previous element to the next, from the first to the second, top to bottom, left to right.

This means that properties such as margin-left and margin-top are not used (not without exceptions). With padding, the opposite is true (other than being used for, decorative purposes, enlarging the link area, etc.). When a box needs a top or left padding, it gets padding at the expense of the padding-top and padding-left of the parent.

The indents go in the direction of the tree house flow, the block does not push itself.
Initially, he is in a static position, and receives some kind of impact, at the expense of others.

The indentation is given to the last possible element in the house.

margin (s) are set only between adjacent elements of the tree house.

Example 3 lists, in the following structure:

Far, far away, beyond the verbal.

Not at the expense of the children, but at the expense of the adjacent ones, the indent is made.

In this situation ,.main-section__item is the last possible indentation to separate lists. The same effect can be achieved if you set the indentation to the div, list, excess, link, but this will not be correct.

This example is pretty simple. But if you imagine a lot more nesting, where someone littered with indents, when some margins collapse. and some are summed up with padings.

headline in a section of seven words

Taking the heading example and you need to indent the heading at the top. then the last element will be a section and padding-top is set for it, margin (s) that are by default always need to be zeroed.

The simplest reason to stick to this principle is to make it easier to find indentation in the future, either to you or to someone who will work with your layout in the future. This is when we talk about convenience.

Real problems can arise when layout with poor indentation structure is rendered dynamically or duplicated.

Indents cannot be set for independent elements (BEM block)

Never indent elements that may be used more than once. Even if you don't stick to methodologies, keep perspective. There are wrappers for that. The wrappers are good. Or additional classes.

If you need to indent a block... Without prejudice, this is done with:

Inheritance through the element (if you pull this block off the element, there will be no indentation, and you can simply place it elsewhere).
Adding a class (you can make a block an element).
A wrapper (like a block with a role only in positioning).

.block__item\u003e .block (margin-right: 10px;) .block.block__item (margin-right: 10px;) .block-wrap\u003e .block (margin-right: 10px;)

The last element of the group is indented (always)

Take a list and an image for example.

it horizontal menu and the logo (which for some reason is on the right).

For the last li, the indent is zero. And the indentation is done between adjacent elements ul and img. What was said in the second principle.

Let's take another example:

...

10.10.10

We are interested in the margin between the news, which is set by.blog-preview__item (margin-bottom: 20px;). The last margin is zeroed out, and the bottom margin is done by padding the blog-preview. What was said in the second principle.

More often than other pseudo-classes, you should use: last-child.

Item: not (: last-child) (margin-bottom: 20px;) // or // .item (// other styles // margin-bottom: 20px; &: last-child (margin-bottom: 0;) ) // or margin-top, the main idea here, not in the direction of the margin, but in the absence of excess // .item + .item (margin-top: 20px;) // or // .item (// other styles // & + & (margin-top: 20px;))

Exceptions

Of course, there are special cases, non-trivial tasks, and nuances in which it is impossible to adhere to these principles, but otherwise you should strive for ideal margins in order to make the layout as clean as possible.

P. S. I advise you to read the publication

A source: Margin or padding?
Philipp Sporrer.
Transfer: vl49.

When is it better to use margins for formatting purposes, and when is padding, and does it matter?

I struggled for a very long time in search of suitable answers. It was only after writing a ton of awful, illegible CSS code, accompanied by various side effects, that I could confidently say that I have found fundamental iron rules regarding the issues listed above.

For clarity, let's turn to a typical situation that is most likely familiar to every developer. user interface in 2017. We have a simple card template.

In this example, two types of intervals can be distinguished:

between cards (blue);

between cards and their container (green);

It is very important to understand here that we are dealing with two different concepts, which should not be interconnected when assembling. That is, if I need to change the distance between the cards and their container, for example, to 24 pixels, then this should not in any way affect the spacing between the cards themselves.

Implementing the example with CSS?

There are literally thousands of ways to create such a template using margins and padding, but I would like to bring to your attention one of them that demonstrates the correct use of the margin and padding properties. Moreover, this method allows you to add other cards later.

Container (
padding: 16px;
}
.card + .card (
margin: 0 0 0 8px;
}

There are only 2 selectors and 2 rules.

What is the function of the plus sign?

Symbol + represents adjacent selector... It only points to the element that immediately follows the element before this selector.

As you can see from the above image, in our case, using this selector will select every card preceded by any other card... So, with the adjacent selector, we can set the left margin for every card except the first.

This means that we have the ability to add any required number of cards, the distance between which will always be equal to eight pixels.

Everything works fine as long as we don't need to place something other than a card next to the cards. Well, let's say a button "Add card" ("Add card"):

Based on the CSS snippet we already have, we probably wouldn't want to assign the class .card to the new button representing the button, since it is not a card. How to be? Is it worth it to create an additional class name for .add-card that contains the same margin rule as the .card class? No, there is a better solution.

Lobotomized Owl * + *.

And what looks like. Despite the funny association, this method works great, and I have used it constantly since I learned about its existence. So what is it all about? Here's a look at the corresponding CSS:

Container (
padding: 16px;
}
/ * Well, did you recognize the lobotomized owl? 😜 * /
.container\u003e * + * (
margin: 0 0 0 8px;
}

As you probably remember, the previous selector applied to any card that is preceded by another card. Now with its help we can format every element immediately preceded by any other elementincluding the button, of course.

Eventually.

I sincerely hope that the material presented here has helped you figure out when to use padding to separate content within a container, and when to use margins.

As a result, I would like to present for your consideration a pen project that demonstrates the above examples, as well as two rules that I have tested on my own experience. So, we use:

padding - for gaps between the container and its content.

margin - for the gaps between the elements inside the container.

19 replies

TL; DR: by default, I use the box everywhere except when I have a border or background and I want to increase the space inside that visible box.

For me, the biggest difference between padding and margin is that vertical margins are automatically compressed, while padding does not.

Consider two elements, one above the other, each indented 1em. This indentation is considered part of the element and is always preserved.

This way you will get the content of the first element, followed by the filling of the first element, then the padding of the second, and then the content of the second element.

So the content of these two elements will end up being 2em by 2 elements.

Now replace that indentation with a 1em margin. Margins are counted outside the element and the margins of adjacent elements will overlap.

So in this example, you will get the content of the first element followed by 1em of the combo box and then the content of the second element. Thus, the content of these two elements is at a distance of 1 1em.

This can be very useful when you know you want to say 1em of distance between elements, no matter which element it is next to.

Two other big differences are that padding is included in the clicked area and the background / image color, but not in the margin.

The best I've seen explaining this with examples, diagrams and even "try it yourself" is this.

The diagram below gives an instant visual indication of the difference.

One thing to keep in mind is standards-compliant browsers (IE quirks are an exception) only render a portion of the content to a given width, so keep track of that in your layout calculations. Also notice that Bootstrap 3 support is visible in the window frame.

MARGIN vs PADDING:

Margin is used in an element to create a distance between that element and other elements on the page. Where padding is used to create spacing between content and the border of an element.

The margin is not part of the item, where the padding is part of the item.

There are more technical explanations for your question, but if you're looking for a way to think about margins and supplements to help you choose when and how to use them, this might help.

Compare the elements of the block with the pictures hanging on the wall:

Window browser looks like a wall.
content looks like a photo.
margin similar to the space between framed images.
addition looks like matting around a photo.
The border is the same as the frame border.

It is useful to use a rule of thumb when deciding on margin and indentation marginwhen you position the element in relation to other things on the wall and complementing... \u003e when you customize appearance the element itself. The margin will not resize the element, but padding will usually make the element larger than 1.

1 This default window model can be changed using the box-sizing attribute.

As far as margins are concerned, you don't need to worry about the width of the element.

Like when you give something (padding: 10px;) you need to reduce the width of the element 20px, to save " fit"and not disturb other elements around it.

So I usually start by using paddings to get all the "packed" and then use the margins for small adjustments.

Another thing to be aware of is that paddings are more compatible in different browsersand IE doesn't take negative margins very well.

Here are some HTML that demonstrate how padding and margins affect clickability and background filling. An object receives clicks on its pad, but clicks on the object's margin "d" to navigate to its parent.

$ (". outer"). click (function (e) (console.log ("outer"); e.stopPropagation ();)); $ (". inner"). click (function (e) (console.log ("inner"); e.stopPropagation ();)); .outer (padding: 10px; background: red;) .inner (margin: 10px; padding: 10px; background: blue; border: solid white 1px;)

Margins clear the area around the element (outside the border), but the addition clears the area around the content (inside the border) of the element.

this means your element is unaware of its outer borders, so if you are developing dynamic web controls, I recommend using padding and margin if you can.

note that a few times you need to use margin.

There are two ways in CSS to create space around your elements: margins and padding. In most use cases, they are functionally identical, but in truth they behave somewhat differently. There are important differences between margins and padding that you should consider when deciding what to use to move elements around the page. However, in cases where any margin or padding can be used for the same effect, many decisions come down to personal preference.

When to use fields

You want your spacing to appear outside the margin created by the border property. The margins lie outside the borders, so you use them if you want your border to stay in one place. This can be useful if you have, for example, a sidebar with a border that you want to move away from the main content area.

You don't want the background color or image to invade your personal space. Background colors and images stop at the border, so if you'd rather keep your backgrounds outside of the space you do, margins are the property you want.

You want to reset the top and bottom of your element. Top and bottom margins behave differently than side margins, in that if two margins are on top of each other, they collapse to the size of the largest set of margins. For example, if I set a paragraph with a top margin of 20 px and a bottom margin of 15 px, Ill would have only 20 px of space between paragraphs (the two margins fall apart, and the greatest wins).

When to use a spacer

A source: Margin or padding?
Philipp Sporrer.
Transfer: vl49.

When is it better to use margins for formatting purposes, and when is padding, and does it matter?

For clarity, let's turn to a typical situation that is most likely familiar to every user interface developer in 2017. We have a simple card template.

In this example, two types of intervals can be distinguished:

between cards (blue);

between cards and their container (green);

Implementing the example with CSS?

Container (
padding: 16px;
}
.card + .card (
margin: 0 0 0 8px;
}

There are only 2 selectors and 2 rules.

What is the function of the plus sign?

Symbol + represents adjacent selector... It only points to the element that immediately follows the element before this selector.

This means that we have the ability to add any required number of cards, the distance between which will always be equal to eight pixels.

Everything works fine as long as we don't need to place something other than a card next to the cards. Well, let's say a button "Add card" ("Add card"):

From the CSS snippet we already have, we probably wouldn't want to assign the .card class to the new button representing the button, since it is not a card. How to be? Is it worth it to create an additional class name .add-card, which contains the same rule with a margin property as the .card class? No, there is a better solution.

Lobotomized Owl * + *.

Container (
padding: 16px;
}
/ * Well, did you recognize the lobotomized owl? 😜 * /
.container\u003e * + * (
margin: 0 0 0 8px;
}

Eventually.

I sincerely hope that the material presented here has helped you figure out when to use padding to separate content within a container, and when to use margins.

As a result, I would like to present for your consideration a pen project that demonstrates the above examples, as well as two rules that I have tested on my own experience. So, we use:

padding - for gaps between the container and its content.

margin - for the gaps between the elements inside the container.

Post Views: 427

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

Figure: 1. Field to the left of the text

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

brief information

Syntax

padding: [<размер> | <проценты>] {1, 4}

Designations

	Description	Example
<тип>	Indicates the type of value.	<размер>
A && B	The values \u200b\u200bmust be displayed in the order shown.	<размер> && <цвет>
A \| B	Indicates that only one of the suggested values \u200b\u200bshould be selected (A or B).	normal \| small-caps
A \|\| B	Each value can be used alone or in conjunction with others in any order.	width \|\| count
	Groups values.	[crop \|\| cross]
*	Repeat zero or more times.	[,<время>]*
+	Repeat one or more times.	<число>+
?	The specified type, word or group is optional.	inset?
(A, B)	Repeat at least A, but no more than B times.	<радиус>{1,4}
#	Repeat one or more times, separated by commas.	<время>#

The 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 \u200b\u200band is shown in table. 1.

The margins can be specified in pixels (px), percentages (%), or other units acceptable for CSS. When specifying a field as a percentage, the value is calculated from the width of the element's parent.

Sandbox

Winnie the Pooh was always not averse to a little refreshment, especially at eleven o'clock in the morning, because at this time breakfast had already ended long ago, and dinner had not even thought to start. And, of course, he was terribly happy to see Rabbit taking out cups and plates.

div (background: # e4efc7; padding: ((playgroundValue)) px;)

Example

padding

Conductometry gently conveys electronic way obtaining, regardless of the consequences of the penetration of methylcarbiol inside.

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