Graphical demonstration of in-depth analysis of CSS margin border overlay_Experience exchange

Boundary overlay is a fairly simple concept. However, it can cause a lot of confusion when laying out web pages 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 heights of the two superimposed boundaries.

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

元素的顶边界与前面元素的底边界发生叠加

　　当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图：

元素的顶边界与父元素的顶边界发生叠加

　　尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，见图：

元素的顶边界与底边界发生叠加

　　如果这个边界碰到另一个元素的边界，它还会发生叠加，见图：

空元素中已经叠加的边界与另一个空元素的边界发生叠加

　　这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有边界都叠加到一起，形成一个小的边界。

　　边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例（见图2-8）。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了

边界叠加在元素之间维护了一致的距离

　　只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

　　边界叠加的问题
　　边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考div元素内嵌套段落的简单示例：

复制代码 代码如下:

 

This paragraph has a 20px margin.

 

 

div 框设置了10像素边界，段落设置了20像素的边界：

复制代码 代码如下:

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

　　你会自然地认为产生的样式会像图1-1那样，在段落和div之间有20像素的距离，在div外边围绕着10像素的边界。

图1-1

　　但是，产生的样式实际上像图1-2。

图1-2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS的margin边界叠加深度剖析</title> <meta name="author" content="Stuart Colville"> <style type="text/css"> #box{ margin:10px; background-color:#d5d5d5; } p{ margin:20px; background-color:#6699ff; } </style> <div id="box"> <p>This paragraph has a 20px margin.</p> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

Two situations happened here. First, the paragraph's 20-pixel top and bottom borders overlap with the div's 10-pixel border to form a single 20-pixel vertical border. Second, instead of being surrounded by the DIV, these borders protrude beyond the top and bottom edges of the DIV. This occurs due to the way elements that have block-level children calculate their height.

If an element has no vertical border or padding, its height is the distance between the top and bottom border edges of its containing child elements. Therefore, the top and bottom margins of the containing child element protrude outside the container element. However, there is a simple solution. By adding a vertical border or padding, the whitespace no longer overlaps, and the element's height is the distance between the top and bottom whitespace edges of its containing child elements.

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

Copy code The code is as follows:

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

Border Most issues with overlays can be fixed by adding a transparent border or a 1px padding.

Supplementary solutions:

Copy code The code is as follows:

　　　1.Outer layer padding
 2.Transparent border border:1px solid transparent;
 3.Absolute positioning postion:absolute:
 4.Outer layer DIV overflow:hidden;
 5.Inner layer DIV plus float:left; display:inline;
6. The outer DIV sometimes uses zoom:1;