Layout of margins and padding in CSS

In this article I would like to tell you how to properly set the margins ( padding ) and indents ( margin ) in CSS.


')
First, let's recall the definition of margins and indents according to the W3C specification . In a box model margins are the distance between the content and the border of the block ( border ). Indentation is the distance between the border of a block and the border of a neighboring or parent element.

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

In any case, it should be remembered that the fields can be either included in the width or height of the element, or not. Indents are always set outside the element.

Now let's look at how to set the margins and indents between the elements. Take the following block as an example.



This is a news block news . It consists of a headline, a list of news, and a “Other News” link. Give them the following class names: news__title , news__list and news__more-link .

 <div class="news"> <h2 class="news__title"></h2> <ul class="news__list"> <li class="news__list-item">...</li> <li class="news__list-item">...</li> <li class="news__list-item">...</li> </ul> <p class="news__more-link"><a href="..."> </a></p> </div> 

Since each of these elements has the same indentation on the left and the right, it is better to set the fields to the parent block, rather than to set the indents on the left and right for each element separately.

 .news { padding: 20px 25px; } 

Thus, if you need to change the value of the fields on the right and left, you will need to do it in one place . And when you add a new element inside the news block, it will already have the necessary indents to the left and to the right.

It often happens that all elements inside the block have the same indents to the left and to the right, except for one that should not have any indents, for example, because of the background. In this case, the element can be set to negative indents. Then you do not have to remove the fields inside the block for the remaining elements.



Now you need to set the vertical indents between the elements. To do this, determine which of the elements is mandatory . It is obvious that a news block cannot exist without a list of news, at the same time the “Other News” links may not exist, the heading can also be removed, for example, when the design is changed.

Considering this, we set the indent for the headline from below, and for the “Other News” link, the indent from the top.

 .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; } 

But in this case, removing the “Other News” link at the bottom leaves an extra indent. The same is true for the title. Obviously, the first option is more correct, because it allows the flexibility to change the appearance of the block.

Now you need to set indents between individual news. Again, you need to take into account that the amount of news can change, and there can be only one news in the list.

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

 .news__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; } 

Thus, the correct placement of margins and indents allows the flexibility to 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 elements of the block are basic ( mandatory ) and which are optional .

Sometimes we can not rely on binding elements. For example, we have a popup popup window, inside which some kind of title and text can be displayed. And in some cases there may be no text, and in some even a 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; } 

jsfiddle.net/onfv42mz/1

Then an indent appears only if both elements are used. In the case of output only the title or only the text, there will be no extra indent.

Collapsing vertical indents

Another nuance, which not everyone knows, is connected with vertical indents between adjacent blocks. In the definition of indents, which I quoted above, it is said that the indent is the distance between the borders of the current and the neighboring block. Thus, if we place two blocks under each other and set one of them to be indented from below at 30px , and the other indented from above at 20px , the distance between them will be not 50px , but 30px .

 .block1 { margin-bottom: 30px; } .block2 { margin-top: 20px; } 

jsfiddle.net/j99btnc8



That is, indentation will occur, and the indentation between the blocks will be equal to the largest indent, and not the sum of indents. This effect is also called “collapse”.

Please note that horizontal indents, unlike vertical ones, do not “collapse”, but are added together. Fields ( padding ) are also summarized.

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

 h1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; } 

jsfiddle.net/n27fms7s/1

Now the h2 heading can be placed both after the h1 heading and after the paragraph. In any case, the indentation at the top will not exceed 24px .

General rules

Summing up, I would like to list the rules that I adhere to when setting fields and indents.

1. If neighboring elements have the same indentation, then it is better to set them to the parent container, rather than elements.
2. When specifying indents between elements, it is necessary to take into account whether this element is mandatory or optional.
3. For the list of the same type of elements - do not forget that the number of elements may vary.
4. Remember to impose vertical indents and use this feature where it will benefit.