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 nested paragraphs in div elements:
Copy CodeThe code is as follows:
This paragraph has a 20px margin.
The Div box is set with a 10 pixel boundary and the paragraph has a 20 pixel boundary:
Copy CodeThe code is as follows:
#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 the Div, as shown in Figure 1-1, around the 10-pixel boundary outside the div.
Figure 1-1
However, the resulting style is actually like Figure 1-2.
Figure 1-2
<textarea id="runcode43891"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "> <title>css margin Overlay depth anatomy </title> <meta name=" author "content=" Stuart Colville " > <style type= "text/css" > #box {margin:10px; Background-color: #d5d5d5; } p{margin:20px; Background-color: #6699ff; } </style> </pead> <body> <p>this paragraph has a 20px margin.</p> </body> </pt Ml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Two cases have taken place here. First, the 20-pixel upper and upper bounds of the paragraph are superimposed with the DIV's 10-pixel boundary, forming a single 20-pixel vertical boundary. Second, these boundaries are not surrounded by div, but protrude to the top of the div and to 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 the div:
Copy CodeThe code is as follows:
#box {
margin:10px;
padding:1px;/* or border:1px solid color;*/
Background-color: #d5d5d5;
}
p{
margin:20px;
Background-color: #6699ff;
}
Most of the problems superimposed on the edge L boundary can be fixed by adding a transparent border or 1px filler.
Complementary solutions:
Copy CodeThe code is as follows:
1. Outer padding
2. Transparent frame border:1px solid transparent;
3. Absolute positioning Postion:absolute:
4. Outer div Overflow:hidden;
5. Inner Div plus float:left; Display:inline;
6. The outer div will sometimes use zoom:1;
