Victory over non-obvious. Collapsing indentation
Many beginning web designers and web developers are faced with a situation where elements on the page behave differently than expected, and this behavior seems absurd. But do not forget that the existing dominant technologies created by people who think, and if this technology is also time-tested, it means that there was and remains a need for such strange, at first glance, behavior.
Probably, everyone faced the border-collapse property for tables. It is known that this property with the value of border-collapse: collapse removes one of the borders for neighboring table cells, preventing duplication of their borders. Similarly, the feature of the block model, called collapsing margins, also works (English - Collapsing Margin ). The collapse of external indents is a feature of the CSS block model, which is to impose vertical external indents of two or more block elements (which may or may not be neighbors) to form a single external indent. The indent formed as a result of this union is called a collapsed indent. Note that this feature applies only to the vertical indents of the element, i.e. to margin-top and margin-bottom .
For simplicity, imagine collapsing as follows: when the outer vertical indents of block elements are in contact, there remains an indent, the value of which equals the value of the larger one, while the indent value of the element with the smaller border is zero. In the image below, the size of one cell of the wallpaper is 20 pixels; as you can see, the indent between elements is 40 pixels, although at first glance, looking at the code, to a person who is not familiar with the principles of collapse, it may seem that the blocks are placed incorrectly, since their indents are not plus:
')
* Sample source code
If one of the values has a negative value, then the final value of the collapsed indent is formed by summing the initial values of the block elements. If both values are negative, then a larger negative value is used (less from an arithmetic point of view). For example, if block1 had a margin-bottom value of -60px and a block2 margin-top block : 50px , then the final indent value between elements would be minus 10 pixels.
As in any other concept, there are exceptions here too, so collapsing does not work in the following cases:
There are also specific exceptions that are applied depending on the hierarchical interaction in which the blocks are located (see below):
The theory can be difficult to understand, so let's move on to examples. Consider the classic cases that exist in inheritance: when blocks have a descendant-descendant connection ( sibling-sibling ), the elements are adjacent to each other and have a common parent; and also when the blocks have a parent-child connection ( parent-child ) - one element is nested in another. In both cases, the collapse is successfully applied, but has several nuances that are worth talking about.
Usually, excluding the use of additional properties, the external indents of any neighboring non-root block elements collapse, an example of the collapse of neighboring elements is given above.
Sometimes you want to avoid this effect. In addition to using collapsing properties, you can use some tricks, for example, not to set the indent values for the elements, except for a single indent — from above or below, but if you specify values for a number of elements in this way, you may need to specify indents for the first or last element relative to the parent , or change its field:
* Sample source code
As you can see, here we need to add the parent element to the lower internal field in order to align all the elements. Should I break my legs, that would substitute crutches - a matter of taste, but I would not advise.
In this case, the collapse works a little more complicated and more complicated than in the examples above. First you need to know that the counting of blocks collapses the corresponding fields. This means that the upper field of the parent collapses with the upper field of its descendant. To consider this situation, let's imagine that there are three blocks: an external parent block, a parent block, and a child block. In order for the collapse to work, it is necessary that the parent block has neither fields nor boundaries (their values were zero). Thus, the external fields of these elements are in contact. Note that the null values of the internal fields and boundaries for parents are a prerequisite for triggering the collapse.
* Sample source code
I recall that the size of a single cell is 20 pixels, so without collapsing the indentation between the elements would be 60 + 40 pixels, but due to the application of this effect, it is equal to the maximum value of one of the elements, in this case - 60 pixels (3 cells). We see that the indent of the child block replaces the upper indent for its parent. If you specify something for the parent element: a field ( padding ) or a border ( border ), then the collapse will not apply and the distance between the first block and the second one will be obvious 100 pixels. In this way, you can control the presence of this effect by adding a small field, or a colorless border, say, 1 pixel thick, thereby turning off the collapse effect.
At first glance it may seem that the effect only works when the structure is formed as in the example above, but this is not the case: the collapse will work between neighboring elements when they have other nested blocks. Consider the situation when there is an external block and two blocks, one of which is nested in the other.
* Sample source code
It is noteworthy that the collapse in the example above worked twice: first, the indents of the parent and child elements were closed, then the formed indent collapsed with the lower indent of the external element.
For a good specialist, it is important to control all the proper tools and attributes: a good mechanic is concerned not only with the number of valves in the engine, but also with the presence of a good fuel injection system and the quality of the fuel itself. So a good web developer should control every pixel and not lose important details in the site structure.
The devil in the details, the devil in pixels.
Probably, everyone faced the border-collapse property for tables. It is known that this property with the value of border-collapse: collapse removes one of the borders for neighboring table cells, preventing duplication of their borders. Similarly, the feature of the block model, called collapsing margins, also works (English - Collapsing Margin ). The collapse of external indents is a feature of the CSS block model, which is to impose vertical external indents of two or more block elements (which may or may not be neighbors) to form a single external indent. The indent formed as a result of this union is called a collapsed indent. Note that this feature applies only to the vertical indents of the element, i.e. to margin-top and margin-bottom .
For simplicity, imagine collapsing as follows: when the outer vertical indents of block elements are in contact, there remains an indent, the value of which equals the value of the larger one, while the indent value of the element with the smaller border is zero. In the image below, the size of one cell of the wallpaper is 20 pixels; as you can see, the indent between elements is 40 pixels, although at first glance, looking at the code, to a person who is not familiar with the principles of collapse, it may seem that the blocks are placed incorrectly, since their indents are not plus:
')
#block1 { margin:40px; /* 40 */ } #block2 { margin:40px; /* */ margin-top:20px; /* */ } * Sample source code
If one of the values has a negative value, then the final value of the collapsed indent is formed by summing the initial values of the block elements. If both values are negative, then a larger negative value is used (less from an arithmetic point of view). For example, if block1 had a margin-bottom value of -60px and a block2 margin-top block : 50px , then the final indent value between elements would be minus 10 pixels.
As in any other concept, there are exceptions here too, so collapsing does not work in the following cases:
- with floating blocks that use the float property;
- with root elements ( html , body );
- with absolutely positioned elements having property and value position: absolute ;
- in line elements.
There are also specific exceptions that are applied depending on the hierarchical interaction in which the blocks are located (see below):
- If elements have an overflow property that is distinguishable from visible , then indents and indents of their heirs do not collapse in such elements.
- Elements with the cleared property do not collapse the upper indents with the lower indents of their parents.
The theory can be difficult to understand, so let's move on to examples. Consider the classic cases that exist in inheritance: when blocks have a descendant-descendant connection ( sibling-sibling ), the elements are adjacent to each other and have a common parent; and also when the blocks have a parent-child connection ( parent-child ) - one element is nested in another. In both cases, the collapse is successfully applied, but has several nuances that are worth talking about.
Neighboring elements and collapse
Usually, excluding the use of additional properties, the external indents of any neighboring non-root block elements collapse, an example of the collapse of neighboring elements is given above.
Sometimes you want to avoid this effect. In addition to using collapsing properties, you can use some tricks, for example, not to set the indent values for the elements, except for a single indent — from above or below, but if you specify values for a number of elements in this way, you may need to specify indents for the first or last element relative to the parent , or change its field:
#parent { margin: 40px; border:1px dashed white; background:rgba(150, 0, 255, 0.2); width:204px; } /* padding-bottom:20px; */ .block { height:16px; margin-top: 20px; border:2px solid white; background:rgba(150, 0, 255, 0.7); } * Sample source code
As you can see, here we need to add the parent element to the lower internal field in order to align all the elements. Should I break my legs, that would substitute crutches - a matter of taste, but I would not advise.
Collapsing the padding of parent related elements
In this case, the collapse works a little more complicated and more complicated than in the examples above. First you need to know that the counting of blocks collapses the corresponding fields. This means that the upper field of the parent collapses with the upper field of its descendant. To consider this situation, let's imagine that there are three blocks: an external parent block, a parent block, and a child block. In order for the collapse to work, it is necessary that the parent block has neither fields nor boundaries (their values were zero). Thus, the external fields of these elements are in contact. Note that the null values of the internal fields and boundaries for parents are a prerequisite for triggering the collapse.
.outside_parent { margin-top:40px; margin-left: 40px; border:2px dotted black; background:rgba(150, 0, 255, 0.7); } .parent { padding:0px; /* 0 */ border:0px solid grey; /* */ margin-top: 40px; /* */ background:rgba(150, 0, 255, 0.7); } .daughter { width: 196px; margin-top:60px; /* */ border:2px solid white; } * Sample source code
I recall that the size of a single cell is 20 pixels, so without collapsing the indentation between the elements would be 60 + 40 pixels, but due to the application of this effect, it is equal to the maximum value of one of the elements, in this case - 60 pixels (3 cells). We see that the indent of the child block replaces the upper indent for its parent. If you specify something for the parent element: a field ( padding ) or a border ( border ), then the collapse will not apply and the distance between the first block and the second one will be obvious 100 pixels. In this way, you can control the presence of this effect by adding a small field, or a colorless border, say, 1 pixel thick, thereby turning off the collapse effect.
At first glance it may seem that the effect only works when the structure is formed as in the example above, but this is not the case: the collapse will work between neighboring elements when they have other nested blocks. Consider the situation when there is an external block and two blocks, one of which is nested in the other.
.outside { height:16px; margin: 20px 0 0 40px; border:2px solid white; background:rgba(150, 0, 255, 0.7); margin-bottom:20px; /* */ } .parent { margin-top:40px; /* */ margin-left:40px; } /* */ .daughter { margin-top:60px; /* */ border:2px solid white; } * Sample source code
It is noteworthy that the collapse in the example above worked twice: first, the indents of the parent and child elements were closed, then the formed indent collapsed with the lower indent of the external element.
Conclusion
For a good specialist, it is important to control all the proper tools and attributes: a good mechanic is concerned not only with the number of valves in the engine, but also with the presence of a good fuel injection system and the quality of the fuel itself. So a good web developer should control every pixel and not lose important details in the site structure.
The devil in the details, the devil in pixels.
Source: https://habr.com/ru/post/257327/
All Articles