Indentation in the layout (margin / padding)

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 respect the meaningful structure in all aspects of the layout, and it is equally important to keep it in the indents. And one of the basic principles of layout is flexibility. Namely, the ability to easily make any changes and do not break anything. Proper handling of margin and padding plays a very large role in this business.



The following principles are implemented in the environment of positioning elements on the page. The elements of the decor are also performed. But not so categorical.



Basic principles:

')

1. Indents go from the previous element to the next.
2. The indent is set to the last possible element in the house.
3. Indenting cannot be set for independent elements (BEM block).
4. At the last element of the group, the indent is reset (always).

Indents go from the previous element to the next.

The margin (s) are set from the previous item to the next, from the first to the second, from top to bottom, from left to right.







This means that such properties as margin-left and margin-top are not used (not without exceptions). With padding, everything is a little different (except that it is used for decorative purposes, increasing the area of ​​reference, etc.). When a block needs to be indented from the top or left, it gets it at the expense of the parent’s padding-top and padding-left.











The indents go in the direction of the flow of the tree house , the block does not push itself.

Initially, it is in a static position, and receives some kind of impact, at the expense of others.

The indent is set to the last possible element in the house.

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



In example 3 of the list, in the following structure:

<section class="main-section"> <div class="main-section__item"> <div> <ul> <li><a href="">-,  .</a></li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> </div> </div> <div class="main-section__item">...</div> <div class="main-section__item">...</div> </section> 

Not at the expense of the child elements, but at the expense of the neighboring indents.







In this situation, the .main-section__item is the last possible person to indent to separate lists. The same effect can be achieved if you set the indent of the diva, the list, the extra, the link, but this will not be correct.



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

 <section> <h1>headline in a section of seven words</h1> </section> 

If you take an example with the title, and you need to indent the title from above. then the last element will be a section and the padding-top, margin (s) that are set by default is always set to zero.







The simplest reason why you should stick to this principle is to make it easier to find an indent in the future, either to you or to someone who will continue to work with your typesetting. This is if we talk about convenience.



Real problems can occur when a layout with a bad indentation structure is displayed 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 do not adhere to methodologies, consider perspective. For this there are wrappers. Wraps 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 out this block from the element, there will be no indent, and it can be simply placed elsewhere).
• Adding a class (you can make a block element).
• A wrapper (as a block with a role, only in positioning).

 .block__item > .block { margin-right: 10px; } .block.block__item { margin-right: 10px; } .block-wrap > .block { margin-right: 10px; } 

At the last element of the group, the indent is reset (always)

Take for example the list and image.

 <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> <img src="" alt=""> 

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



Between links and logo the same distance. But if there is a distance between the last and the new unit, then this indent is done not at the expense of the extra. And the list is retreating.











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



Take another example:

 <aside class="blog-preview"> <div class="blog-preview__item"> <article class="preview-item"> <h3 class="preview-item__title">...</h3> <p class="preview-item__desc">...</p> <aside class="preview-item__meta"> <time>10.10.10</time> </aside> </article> </div> <div class="blog-preview__item">...</div> <div class="blog-preview__item">...</div> </aside> 

We are interested in the indent between the news, which is set by .blog-preview__item { margin-bottom: 20px; } .blog-preview__item { margin-bottom: 20px; } . The last margin is reset, and the bottom indent is done by padding the blog-preview . What was mentioned in the second principle.



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

 .item:not(:last-child) { margin-bottom: 20px; } //  // .item { //   // margin-bottom: 20px; &:last-child { margin-bottom: 0; } } //  margin-top,   ,    ,     // .item + .item { margin-top: 20px; } //  // .item { //   // & + & { margin-top: 20px; } } 

Exceptions

• The first is the addition of text content through the admin area . This is an excellent approach to indenting the browser. But this approach cannot be considered as suitable in the usual layout like several <br> in the code in a row.
  
  
  
  
• Pressing the footer to the bottom of the browser window. The best way to press the footer is on flex. Where body sets the minimum height, not fixed (100% / vh), and the footer margin-top: auto;
  
  
  
  

   body { display: flex; flex-direction: column; min-height: 100vh; } .footer-page { margin-top: auto; } 

  
  
  
• Sometimes it is better to set vertical padings to child blocks than to the whole section. If in perspective, on other pages in the same place, it refers to the second principle, to set the indent for the last possible , here is the last section, but not possible.
• Negative margins, auto, padding for container.
  
  

---

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 the perfect indents to make the layout as clean as possible.



PS I advise you to familiarize yourself with the publication of the Custom approach for the normalization and reset of styles (custom-reset.css) . And I advise you to use css linter. And anyone interested, can solve the css puzzle .