Introduction to the solution of margin overlay problem in CSS (graphic)

This paper mainly introduces the problem and solution of margin boundary overlay in CSS. Has a good reference value. Let's take a look at the little series.

Analysis of CSS margin overlay depth

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 Poverflow:hidden;

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

6. The outer p sometimes uses zoom:1;