Processing padding in your view. PADDING and MARGIN properties and how to use them

October 18, 2017 at 03:36 pm Organization of indentation in layout (margin/padding)

CSS
HTML

Tutorial

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

The following principles are implemented in the environment of positioning elements on the page. They are also used in decorative elements. 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 indent is reset to zero (always).

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

This means that properties such as margin-left and margin-top are not used (with some exceptions). With padding, everything is a little opposite (except that it is used for decorative purposes, increasing the link area, etc.). When a block needs padding on the top or left, it gets it from the parent's padding-top and padding-left.

The indentations go in the direction of the flow of the tree house, 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 margin is set to the last possible element in the house. margin(s) are set only between adjacent elements of the tree house.

In the example there are 3 lists, in the following structure:

Far, far away, beyond the verbal.

... ...

The indentation is made not at the expense of child elements, but at the expense of neighboring ones.

In this situation, .main-section__item is the last possible one that can be indented to separate the lists. The same effect can be achieved by indenting a div, a list, a line, or a link, but this will not be correct.

This example is quite simple. But if you imagine a much larger nesting, where someone littered with indents, when some margins collapse. and some are added to paddings.

headline in a section of seven words
If we take the example of a title, and you need to indent the title at the top. then the last element will be section and padding-top is set for it, margin(s) which are by default always need to be reset.

The most simple reason which is worth sticking to this principle, this is to make it easier to find the indentation in the future, either for you or for someone who will work with your layout in the future. This is about convenience.

The 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 can be used more than once. Even if you don't follow methodologies, keep things in perspective. There are wrappers for this. Wrappers are good. Or additional classes.

If you need to indent the block. Without prejudice, this is done using:

Inheritance through the element (if you pull this block from the element, there will be no indentation, and you can simply place it in another place).
Adding a class (you can make a block an element).
Wrapper (like a block that has a role, only in positioning).

.block__item > .block ( margin-right: 10px; ) .block.block__item ( margin-right: 10px; ) .block-wrap > .block ( margin-right: 10px; ) For the last element of the group, the margin is reset to zero (always) Let's take a list and an image as an example.

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

For the last li, the indentation is reset to zero. And the indentation is made between adjacent ul and img elements. What was discussed in the second principle.

Let's take another example:

... 10.10.10 ... ...

We are interested in the margin between the news that is set.blog-preview__item ( margin-bottom: 20px; ) . The last margin is reset to zero, and the bottom indentation is made by padding blog-preview . What was discussed 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 is not in the direction of 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 it is worth striving for ideal indentations in order to make the layout as clean as possible.

P.S. I advise you to read the publication

Source: Margin or padding?
Philip Sporrer.
Translation: vl49.

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

I struggled for a very long time in search of suitable answers. It was only after writing a lot of terrible, indecipherable CSS code, accompanied by various side effects, that I could confidently say that I had found the fundamental ironclad rules regarding the issues listed above.

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

IN in this example There are two types of intervals:

between cards (blue);

between the cards and their container (green);

It is very important to understand here that we are dealing with two different concepts that should not be interrelated when assembled. 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 using CSS?

There are literally thousands of ways to create such a template using fields and padding, but I would like to present to your attention one of them, demonstrating the correct use of the margin and padding properties. Moreover, this method allows you to add other cards in the future.

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

Just 2 selectors and 2 rules.

What function does the plus sign perform?

The + symbol represents an adjacent selector. It points only to the element that immediately follows the element specified before this selector.

As can be seen from the image above, in our case, this selector will select every card that is preceded by any other card. So, using the adjacent selector, we can set the left margin for each card except the first one.

This means that we have the opportunity to add any required amount cards, the distance between which will always be eight pixels.

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

Judging by the existing CSS code snippet, we most likely would not assign the class .card to the new element representing the button, since it is not a card. How to be? Is it worth creating an additional class name .add-card for this, which contains the same rule with the margin property as the .card class? No, there is a better solution.

Lobotomized owl *+* .

What does it look like? Despite the funny association, this method works great and I have been using it constantly since I learned of its existence. So what's this all about? Here's a look at the corresponding CSS code:

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

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

Eventually.

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

As a result, I would like to present for your consideration a pen-project demonstrating the above examples, as well as those tested on own experience two rules. So, let's use:

padding - for spaces between the container and its content.

margin - for spaces between elements inside the container.

From the author: When I first started learning CSS, I kept getting confused about margin and padding. They seemed very similar, and in some cases gave the same result. In this tutorial, you'll see the difference between CSS margin and padding, and how these properties affect the space between elements on the page. We will also discuss collapsing margins, using different units measurements when creating adaptive websites. We’ll end the article with a couple of tips on layout using margin and padding.

Block model

Elements in CSS are represented as rectangular boxes. The size of a rectangular block is determined by the properties of the element: content, padding, frame, margin.

The element's content area is located in the middle. Next, padding surrounds the content area. The frame surrounds the padding, and the margin is the outer layer, i.e. it is outside the element. To better understand what we're talking about, the diagram below is shown.

As you can see from the diagram, padding is a layer that extends an element from the outer edge of the content area to the inner edge of the frame. This property controls the distance between the element's border and its content. Padding affects the size of an element on a page, but it has no effect on the spacing between elements on a page.

If you need to increase or decrease the distance between elements, use margin. margin property does not affect the size of the element in any way.

It is important to remember that the sizes of all blocks on a web page depend on the block model used. There are two block models: W3C block model, traditional block model.

According to the W3C block model, the width of an element is calculated from the content of the block without taking into account padding and margin. Padding and border are added on top of the specified dimensions, which can have unpredictable effects on the page layout.

For example, let's take a block with a width of 200px and a height of 200px, padding of 10px on all sides and a border of 2px on all sides. The browser does not see the 200px block. The browser calculates the horizontal space required to display the block, and it is 224px: 200(width)+2(left border)+10(left padding)+10(right padding)+2(right border)=224px. Since this is a square, the height will also be 224px.

On the other hand, the traditional block model takes the sum of the content, padding and border as the width. This means that if your block is 200px wide, the browser will calculate the horizontal space needed to display it, and it will be 200px, including padding and border. The result is more predictable and easier to work with.

By default, all browsers use the W3C block model. The model can be set manually using the box-sizing property. Two values are accepted: content-box (W3C) and border-box (traditional model). The traditional model is more intuitive, which has made it the most popular among web developers.

Here's how to use box-sizing to use the traditional model in your project:

html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )

html (

box - sizing : border - box ;

* , * : before , * : after (

box-sizing: inherit;

If you remember things faster when you do things yourself, try experimenting with Guy Routledge's fun interactive demo.

Setting margin and padding

You can use the padding-top, padding-right, padding-bottom, and padding-left properties to control the padding on all four sides of an element. Padding can also be specified via a shorthand property. If a single padding value is written, CSS uses it to determine the padding for all 4 sides:

/* all 4 sides */ padding: 10px;

If 3 values are presented, the first is responsible for the top, the second for the left and right, and the third for the bottom:

/* top | horizontal | bottom */ padding: 1em 20px 2em;

If all 4 values are presented, then each is responsible for top, right, bottom and left, respectively:

/* top | right | bottom | left */ padding: 10px 10% 2em 15%;

In the demo below, the orange background is the content area for different elements, the white area between the frame and the content is padding:

The external margin, like padding, can be controlled on all 4 sides using the properties margin-top, margin-right, margin-bottom and margin-left. You can also set margin for all 4 sides at once using the shorthand property.

/* all 4 sides */ margin: 10px; /* vertical | horizontal */ margin: 2em 4em; /* top | horizontal | bottom */ margin: 2em auto 2em; /* top | right | bottom | left */ margin: 10px 10% 2em 15%;

Things to remember Use the correct units of measurement

When working with padding and margin, avoid absolute units of measurement. Such units do not adapt to changes in font sizes and screen width.

Let's say you set the element's width to 50% and margin to 15px. At a width of 1200px, the width of the element will be 600px, and the margin will be 15px. At 769px width the element's width will be 384px and the margin will still be 15px.

The element's width changed by 36%, but its margin remained the same. In most cases this is not the most a big problem. However, if you set the element's margin to a percentage, you will have more control over the page layout on all screens. Everything will look proportional without sudden jumps in the applied margin and padding values.

Likewise, you might want to add padding to text elements on the page. In most cases, you want the padding to be proportional to the font size on the element. This is impossible to do in absolute units. However, if you set the padding to em, it will automatically adjust to the font size. The demo below shows scaling in action.

How browsers calculate margin and padding for different units of measurement

Browsers calculate final margin and padding values differently depending on the units of measurement.

Margin and padding, specified as a percentage, are calculated relative to the width of the container. That is, 5% padding will be equal to 5px if the container width is 100px, or 50px if the container width is 1000px. Don't forget that the top and bottom values are also calculated based on the width of the container.

In the case of em, the margin and padding are based on the font size of this element. In the previous demo, the padding on the bottom three text elements is 1em. Because of different sizes font, the calculated padding value will always be different.

There are also 4 viewport units of measurement vw, vh, vmin and vmax. In this case, the margin and padding values will depend on the viewport. For example, padding 5vw will be equal to 25px with a viewport width of 500px, and padding 10vw will be equal to 50px on the same viewport. You can study these units of measurement in more detail in the article on the SitePoint website “CSS Viewport of Units of Measure: Quick Start”.

If you're a beginner, knowing how these units work will help you quickly understand why padding and margin on HTML elements change depending on the size of the parent, font, or even viewport. And this will give you the ability to control your layout.

Collapse of margins

You also need to know about the concept of collapsing margins. In certain situations, the top and bottom margins on two elements can collapse into one. This phenomenon is called margin collapse.

Let's say you have two elements one below the other, i.e. on the same level. If you set a margin-bottom of 40px on the first element, and a margin-top of 25px on the second, then the total margin between the elements will not be equal to 65px. The indentation will be equal to the value of the larger margin, i.e. 40px.

Likewise, the margin can collapse between the parent and the first or last child. This happens if there is no border, padding or inline content separating the child and parent margins. In this case, if there is no padding or border on the parent, the margin of the child element will “flow” from the parent.

This behavior can be corrected. To do this, you need to add a barrier between the parent and child margins. The demo below shows how adding a border or padding to the parent element can fix the problem.

In the case of negative margins, the final value of the collapsed margin is equal to the sum of the positive margin with the smallest negative one. You can study the topic of collapsing margins in more detail in the article “Collapsing Margins” by Adam Roberts.

Interesting ways to use margin and padding

Sometimes using margin and padding can solve layout problems. Below are some examples:

Maintain aspect ratio in images

Often, images on a page have different aspect ratios. If you need to show all images with the same aspect ratio, this will help you CSS padding.

To do this, you need to set the height of the parent to zero, and the padding-top property of the parent should be equal to the aspect ratio value, expressed as a percentage.

For example, an aspect ratio of 16:9 is achieved by padding: 56.25% 0 0 0. The value 56.25 is obtained by (9/16)*100. Using this method, you can calculate padding percentages for any other aspect ratio.

Conclusion

If you're just starting to learn CSS, I hope this tutorial helped you understand the difference between margin and padding. You need to learn how to set margin and padding using abbreviations and appropriate units of measurement. In the last section, I showed two interesting ways to use properties in layouts, and also gave you links to resources for further learning. If you have other tips on CSS margin and padding, please post them in the comments.

Hello, dear readers of the blog site. Today I want to continue the topic of study and consider those style rules that allow you to set indents and borders for HTML elements: border, margin and padding.

Before this we managed to study quite a lot simple properties which manipulated fonts(), text() and looked at the model

Yes, we also managed to consider the principles of use in detail (extending over several articles). Now it’s time to move on to the rules that form the basis for constructing documents (web pages), and we will start with the block model (the relationship of Html elements).

IN general outline I’ve already written about modern ones, but today we’ll get into pure specifics. If you would like to take a look previous publications on the topic, then you are welcome to .

Box model in CSS - padding, margin and border

Third, interest may be used. What are they counted from? It turns out that the width of the container (that is, the content area parent element). Moreover, this applies not only to margin-right and left, which would be logical, but also for margin-top and bottom, the percentages will be calculated precisely from the width (and not the height) of the container.

It should be noted, speaking about setting dimensional values, that Margin can also be negative. Those. when specifying a positive value for the outer margin, we move the adjacent element to the specified distance, and if we specify a negative value, the neighboring block will simply overlap the one for which we set this negative indentation. And this is used very often in CSS.

Well, it goes without saying that there is a prefabricated CSS Margin rule, which in many cases allows you to reduce the size of the code used to set the required margins. The order of values in it is strictly regulated (they are written through space character) and should match the example:

Those. the enumeration starts from the top and continues clockwise until the circle ends with the right indentation. It might look something like this:

Margin:20px 10px 40px 30px;

And this will mean that the browser above our block should indent 20 pixels, on the right - 10, below - 40, and on the left - 30. That is. this entry would be equivalent to:

The reduction of CSS code is visible to the naked eye. But this is not the limit. It is quite acceptable to use not only four, but also three, two, and even just one value in a prefabricated rule. Which will further help reduce the code size. However, it will be possible to reduce the number of values only in certain cases:

If the margins on the left and right are the same, for example, like this: margin:20px 30px 40px 30px;

That last one can be omitted:

Margin:20px 30px 40px;

These two prefab rule entries do the same thing. Therefore, if you see an entry with three values in Margin, then the value of the fourth (on the right) can be seen in the second (on the left).

If the indents above and below are equal, such a trick will no longer work, because logically it is possible to reduce the structure of a prefabricated rule record only by cutting off the duplicate values from its end (and the value of the lower indent will be the penultimate one).

If, in addition to equality of external margins on the left and right, there is equality of their values at the top and bottom: margin:20px 30px 20px 30px;

or, what is the same (due to point 1):

Margin:20px 30px 20px;

Then such a prefabricated rule can be written with only two values, discarding the last one, which coincides with the first:

Margin:20px 30px;

And finally, if all the values in the prefab rule are the same: margin:20px 20px 20px 20px;

or, which is the same (due to point 2):

Margin:20px 20px;

Then it will be possible to use the most abbreviated record type (discarding last value coinciding with the first):

Margin:20px;

Which will mean the same margin on all sides of our Html element.

Speaking about external margins, it is worth mentioning such a scheme as “Margin-colloapse” or, in other words, “collapsing margins”. In a nutshell, the essence of this phenomenon is as follows. If we have two blocks located under each other (collapsing of margins can only occur vertically) and opposite external margins are set for both of them (for example, bottom for the top element and top margin for the bottom), then higher value

Margin will absorb less.

For example, if the top block is set to:

Margin:20px 20px 200px 20px;

And for the bottom one:

Margin:100px 20px 20px 20px;

Then the lower margin of the upper block (200px) will absorb the upper margin of the lower one (100px, and even if it becomes equal to 199px, nothing will change) and the resulting external margin between these two blocks will still be equal to 200px. Those. Only the larger modulo Margin is taken into account, and it does not add up in any way with the counter value of the vertically adjacent element.

This is a catch that works exclusively vertically, and horizontally, opposing Margin dimensions will simply be added to each other. But this only applies to margins with the same sign, but if they are with different signs, then their numbers will simply add up and the blocks will be separated from each other by the resulting value.

For example, in this case:

Top margin:20px 20px -20px 20px;

Bottom margin:10px 20px 20px 20px; The resulting margin between blocks will be -10px, i.e. the bottom one will overlap the top Html element by 10px. Another feature of using the Margin rule in CSS is that the specified vertical value for

inline elements

ignored. By asking:

Margin:20px; For example, for , which is an inline element, we will actually only see horizontal padding, and no changes will occur vertically. Looking ahead a little, I’ll say that Padding vertically for line tags will work, but the increased internal padding will not affect it in any way

In the case of a block tag (headings, paragraphs), increasing vertical Padding would move this element relative to other adjacent blocks.

Well, the frame (Border), or rather its width, will also not be able to move other adjacent blocks vertically away from the line tag. For inline elements, movement is only possible in one direction - horizontally and that’s it.

Padding and border - internal padding and frames

Let's now move on to setting padding using the Padding rule and see exactly what values it can take:

As you can see, there is no mention of Auto, and this CSS rule does not allow negative values (they can only be positive - from zero and above). Those. There is no way to push content beyond the frame using Padding. The maximum that can be done is to bring the content very close to the frame.

The percentages in it are calculated in the same way as in Margin - relative to the width of the container (the content area of the parent element) in which our element is enclosed. The Padding rule in Css is formed and obeys the same laws as discussed above:

Padding:20px 10px 40px 30px;

In this rule, starting from the top, we describe all four sides. If you need to reduce something in it (to three, two or even one value), then you will need to use the reduction principles described just above for external indents, which will work with exactly the same success for internal ones.

And the last thing today I would like to consider is the framework that is set with using Border. They have three types of parameters:

Border-width — sets the thickness of the border

Border-color — sets its color

Border-style - the type of frame or the type of line with which it will be drawn

All three of these CSS rules have a valid set of values:

The line width for the frame (Border-width) can be specified either using numbers in Em, Ex or Px, or in words:

Thin - thin line;

Medium - average ( given value is used by default);

Thick - thick.

border-width:2px;

As a value for the border color ( Border-color ), you can use the accepted methods for specifying them ( hexadecimal code, words, etc.):

Border-color:red;

By default, if the border color is not explicitly specified, the one used for the font inside the element will be used.
CSS Border-style property allows you to specify the type of frame in words:

None - no frame (default)

Dotted - the line is drawn in dots

Dashed - dotted line

Solid - solid line

Double - double line

Groove - depressed frame

Ridge - protruding

Inset and outset - shadow games

Naturally, since there are four sides of any block, it can be used as general rules, and separate for each side:

The same will apply to the combined Border rule - it can be written both for all sides simultaneously (Border), and for each side separately (Border-top, left, bottom and right). The order of the values is not important:

Border:1px solid red;

If you miss something, the default value will be used instead.

Good luck to you! Before see you soon on the pages of the blog site

You can watch more videos by going to ");">