Using CSS to overlay problems and solutions in margin boundaries

Introduction to Boundary overlays

Boundary overlay is a fairly simple concept. However, when you lay out a Web page in practice, it creates a lot of confusion. Simply put, when two vertical boundaries meet, they form a boundary. The height of this boundary is equal to the larger of the two height of the bounding boundary where the overlay occurs.

When an element appears above another element, the bottom boundary of the first element overlaps with the top boundary of the second element, as shown in the figure:

The top boundary of the element overlaps with the bottom boundary of the preceding element

When an element is contained in another element (assuming there are no padding or borders separating the boundaries), the top and/or bottom boundaries of the elements are superimposed, as shown in the figure:

The top boundary of the element overlaps with the top boundary of the parent element

Although it may seem strange at first, the boundary can even overlap with itself. Suppose there is an empty element that has a border, but no border or padding. In this case, the top and bottom boundaries come together and they overlap, as shown in the figure:

Overlay of the top and bottom boundaries of an element

If this boundary touches the boundary of another element, it will also overlap, as shown in the figure:

Superimposed boundaries in empty elements overlap with the boundaries of another empty element

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

The boundary overlay may seem a bit strange at first, but it actually does make sense. Take the example of a typical text page consisting of several paragraphs (see Figure 2-8). The space above the first paragraph equals the top boundary of the paragraph. If there is no bounding overlay, the boundary between all subsequent paragraphs will be the sum of the adjacent top and bottom boundaries. This means that the space between the paragraphs is twice times the top of the page. If a boundary overlay occurs, the top and bottom boundaries between the paragraphs are superimposed so that the distances are consistent.

Boundary overlays maintain a consistent distance between elements

Boundary overlays occur only on the vertical boundaries of a block box in a normal document flow. The boundary between the inline box, the float box, or the absolute position box does not overlap.

The problem of boundary overlay

Side-Office overlay is a CSS feature that can cause a lot of trouble if misunderstood. Please refer to a simple example of a nested paragraph in the P element:

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

The P-Box sets a 10-pixel boundary, and the paragraph sets a 20-pixel boundary:

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

You will naturally assume that the resulting style will have a 20-pixel distance between the paragraph and p, as shown in Figure 1-1, around the 10-pixel boundary outside p.

Figure 1-1

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

Figure 1-2

Two cases have taken place here. First, the 20-pixel upper and upper boundary of the paragraph is superimposed with the 10-pixel boundary of P, forming a single 20-pixel vertical boundary. Second, these boundaries are not surrounded by P, but protrude to the top of P and the outside of the bottom. This occurs because the elements that have block-level child elements are calculated as a result of their height.

If an element has no vertical border and padding, its height is the distance between the top of the child element it contains and the edge of the bottom border. Therefore, the top and bottom blank edges of the contained child elements protrude to the outside of the container element. However, there is an easy solution. By adding a vertical border or padding, the blank edges are no longer stacked, and the height of the element is the distance between the top of the child element it contains and the edge of the bottom margin.

To make the previous example look like Figure 1-1, just add a filler or border around P:

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

Most problems with boundary overlays can be fixed by adding a transparent border or a 1px filler.

Complementary solutions:

1. Outer padding

2. Transparent frame border:1pxsolidtransparent;

3. Absolute positioning Postion:absolute:

4. Outer P Overflow:hidden;

5. Inner layer p plus float:left;display:inline;

6. The outer p sometimes uses zoom:1;

Here are some more detailed explanations.

in css2.1, the horizontal margin is not collapsed. vertical margin may be folded in some box models :

1. In the regular document flow, the vertical margin adjacent to 2 or more block-level box models is collapsed.

The final margin value is calculated as follows:

A, all are positive, take the largest person;
b, not all positive values, then the absolute value is taken, and then minus the maximum with a positive number;

C, without a positive value, take absolute values and subtract the maximum by 0.

Note: Adjacent box models may be dynamically generated by DOM elements and do not have an adjacent or inheritance relationship.

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

3. The margin between the element that sets the overflow attribute and its child elements is not collapsed (except for the overflow value).

4, set the absolute positioning (position:absolute) of the box model, vertical margin will not be folded, and even between their child elements are the same.

5, set the Display:inline-block elements, the vertical margin will not be folded, and even between their child elements are the same.

6, if a box model of the upper and lower margin adjacent, then its margin may be folded cover (collapse through) it. In this case, the position of the element (position) depends on whether the margin of its neighboring elements is collapsed.

A, if the margin of the element and the margin-top of its parent element are folded together, the bounding definition of the box model Border-top is the same as its parent element.

b, in addition, the parent element of any element does not participate in the folding of margin, or only the margin-bottom of the parent element is involved in the calculation. If the element's border-top is nonzero, then the element's border-top boundary position is the same as the original.

A margin-top of an element that has a purge operation applied will never collapse with the margin-bottom of its block-level parent element.
Note that the position of those elements that have been collapsed has no effect on the position of the other elements that have been collapsed, and the border-top boundary position is required only if the child elements of those elements are positioned.

7. The vertical margin of the root element is not collapsed.

The margin-bottom of a floating block-level element is always adjacent to the sibling of the floating block-level sibling element (floated next In-flow block-level margin-top) behind it, unless the same sibling element uses the purge operation.

The margin-top of the floating block-level element and its first floating-block-level child element (floated-in-flow block-level children) are adjacent to Margin-top (if the element does not have border-top, There is no padding-top, and the child element is not using the purge operation).

Margin-bottom of a floating block-level element if the following conditions are met, it is adjacent to the margin-bottom of its last floating block-level child element (if the element does not specify Padding-bottom or border):

A, designated Height:auto

B, min-height less than the actual use height of the element (height)

C, max-height greater than the actual use height of the element (height)

If the Min-height property of an element is set to 0, the margin it owns is contiguous, and it has neither border-top nor border-bottom, nor padding-top and Padding-bottom, Its Height property can be 0 or auto, it cannot contain an inline box model (line box), and its margin for all floating child elements (if any) is also contiguous.

When the margin owned by an element is collapsed, and it uses a purge operation, its margin-top will collapse with the adjacent margin of the sibling element immediately following it, but the result is that its margin will not be folded with the margin-bottom of its block-level parent element.

The collapse operation is based on the values of padding, margin, border (that is, after the browser resolves all these values), and the collapsed margin calculation overrides the values of the different margin that were used.

This paper discusses the problem of margin overlay in CSS and its solution, and the margin value of the inner layer p is invalid.