CSS), cssmargin

CSS's margin boundary superposition problem and solution (conversion), cssmargin

Introduction to border superposition

Border superposition is a simple concept. However, it may cause a lot of confusion when layout webpages in practice. Simply put, when two vertical boundaries meet, they form a boundary. The height of this boundary is equal to the greater of the two overlapping boundary heights.

When an element appears on another element, the bottom boundary of the first element overwrites the top boundary of the second element, as shown in the figure below:

 

◆ The top boundary of an element is superimposed on the bottom boundary of the preceding element.

When an element is contained in another element (if it is not filled or the border is separated), their top and/or bottom boundaries are also superimposed, as shown in the following figure:

 

◆ The top boundary of an element is superimposed on the top boundary of the parent element.

Although it seems a bit strange at the beginning, the boundary can even overlap with itself. Suppose there is an empty element that has a boundary, but there is no border or fill. In this case, the top boundary and the bottom boundary come together, and they will overlap, as shown in the figure below:

 

◆ Top boundary and bottom boundary of an element are superimposed

If this boundary hits the boundary of another element, it will overlay it, as shown in the following figure:

◆ Overlapping borders of an empty element and those of another empty Element

This is why a series of empty section elements occupy a very small space, because all their boundaries are superimposed to form a small boundary.

Boundary superposition may seem a bit strange at the beginning, but it actually makes sense. Take a typical text page composed of several paragraphs as an example (see Figure 2-8 ). The space above the first paragraph is equal to the top boundary of the paragraph. If no boundary is superimposed, the boundary between all subsequent paragraphs is the sum of the adjacent top boundary and bottom boundary. This means that the space between paragraphs is twice that at the top of the page. If a boundary overlay occurs, the top boundary and bottom boundary of a paragraph are superimposed, so that the distance between each section is the same.

◆ The boundary is superimposed on elements to maintain a consistent distance.

Only the vertical boundary of the block box in the normal document flow can overlap the boundary. The boundary between the line box, floating box, or absolute positioning box is not superimposed.

Border superposition

Side-by-side superposition is a misunderstanding that will cause a lot of troublesome CSS features. See the simple example of nested section in the div element:

<div id="box"> <p>Thisparagraphhasa20pxmargin.p> </div> 

 

The div box sets a 10-pixel border and a section sets a 20-pixel border:

#box{  margin:10px;  background-color:#d5d5d5;  }  p{  margin:20px;  background-color:#6699ff;  }  

 

Naturally, you will think that the generated style will have a 20-pixel distance between the paragraph and the div, as shown in Figure 1-1. The div is surrounded by a 10-pixel boundary.

Figure 1-1

However, the generated style is actually like Figure 1-2.

Figure 1-2

There are two situations. First, the 20-pixel upper boundary and upper boundary of a paragraph are superimposed on the 10-pixel boundary of the div to form a single 20-pixel vertical boundary. Second, these boundaries are not surrounded by DIV, but are highlighted to the top and bottom of the DIV. In this case, the height of an element with a block-level sub-element is calculated.

If the element does not have a vertical border or fill, its height is the distance between the top and bottom border edge of the child element it contains. Therefore, the blank edges at the top and bottom of the child element are highlighted outside the container element. However, there is a simple solution. By adding a vertical border or filling, the blank edge is no longer stacked, and the height of the element is the distance between the top and the bottom blank edge of the child element it contains.

To make the previous example look like Figure 1-1, add a fill or border around the div:

# Box {margin: 10px; padding: 1px;/* or border: 1 pxsolidcolor; */background-color: # d5d5d5;} p {margin: 20px; background-color: # 6699ff ;}

 

Most problems of border superposition can be solved by adding a transparent border or 1px padding.

Supplementary solution:

1. Outer padding

2. Transparent border: 1 pxsolidtransparent;

3. Definitely locate postion: absolute:

4. Outer DIV overflow: hidden;

5. Add float: left to the inner DIV; display: inline;

6. The outer DIV sometimes uses zoom: 1;

Here are some more detailed explanations.

In css2.1, horizontal margin is not folded. Vertical margin may be folded in some box models:

1. In a conventional Document Stream, the vertical margin adjacent to two or more block-level box models is collapsed.

The final margin value calculation method is as follows:

A. All values are positive values. The vertex is used;
B. if not all values are positive values, take the absolute value and subtract the maximum value from the positive value;
C. If there is no positive value, take the absolute value and subtract 0 from the maximum value.

Note: The adjacent box model may be dynamically generated by DOM elements and has no adjacent or inheritance relationships.

2. In the adjacent box model, if one of them is floated, the vertical margin will not be folded, even between a floating box model and its child elements.

3. The margin between the element with the overflow attribute set and its child elements will not be folded (except for the value of overflow being visible ).

4. The position: absolute box model is set. Vertical margin won't be folded, even between them and their child elements.

5. Set the display: inline-block element. The vertical margin won't be folded, even the same as their child elements.

6. If the upper and lower margin of a box model are adjacent, its margin may be folded and overwritten (collapse through. In this case, the position of an element depends on whether the margin of its adjacent elements is folded.

A. If the element's margin and its parent element's margin-top fold together, the boundary definition of the box model border-top is the same as that of its parent element.

B. In addition, the parent element of any element does not participate in the margin folding, or only the parent-bottom is involved in the calculation. If the border-top of an element is non-zero, the boundary position of the element is the same as that of the original element.

The margin-top of an element that applies the cleanup operation will never fold with the margin-bottom of its block-level parent element.
Note that the positions of elements that have been folded and overwritten do not affect the positions of other elements that have been collapsed. Only when you locate the child elements of these elements, border-top boundary position is required.

7. Vertical margin of the root element will not be folded.

The margin-bottom of a floating block-level element is always adjacent to the margin-top of the floating block-level sibling element (floated next in-flow block-level sibling, unless the same level element uses the clear operation.

The margin-top of a floating block-level element and its first floating block-level child element (floated first in-flow block-level child) (If this element does not have border-top, there is no padding-top, and the child element does not use the clear operation ).

If the margin-bottom of a floating block-level element meets the following conditions, it is adjacent to the margin-bottom of its last floating block level sub-element (if this element does not specify padding-bottom or border ):

A. height: auto is specified.
B. min-height is smaller than the actual height of the element)
C. max-height is greater than the actual height of an element)

If the min-height attribute of an element is set to 0, its margin is adjacent, and it neither has border-top nor border-bottom, there is no padding-top or padding-bottom. Its height attribute can be 0 or auto. It cannot contain an inline box model (line box ), all its floating child elements (if any) are adjacent to each other.

When an element's margin is folded and it uses the clear operation, its margin-top will collapse with the adjacent margin of the sibling element following it, but the result is that its margin cannot be folded with the margin-bottom of its block-level parent element.

The folding operation is based on the values of padding, margin, and border (that is, after the browser parses all these values). The collapsed margin calculation overwrites the different margin values used.

 

This article