关于边界堆叠的概念及理解
边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。
懒得抄了，记下网址。
关于该问题的一些讨论，知乎：如何解决外边距叠加的问题？ 百度搜的的一个博客：CSS的margin边界叠加深度剖析 collapsing-margin的W3C官方介绍：http://www.w3.org/TR/CSS2/box.html#collapsing-margins
我自己也写了一个页面，来研究这个问题
margin_test.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>margin-test</title> <style> .margin{ width: 580px; margin-right: 10px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; clear: both; font-size: 14px; line-height: 24px; padding-bottom: 20px; word-wrap: break-word; } .margin p{ font-size: 14px; text-indent: 2em; margin: 26px 0; } .margin-fl-h{ width: 580px; margin-right: 10px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; clear: both; font-size: 14px; line-height: 24px; padding-bottom: 20px; word-wrap: break-word; } .margin-fl-h p{ font-size: 14px; text-indent: 2em; margin: 0 26px; width: 100px; height: auto; float: left; } .margin-fl-v{ width: 580px; margin-right: 10px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; clear: both; font-size: 14px; line-height: 24px; padding-bottom: 20px; word-wrap: break-word; } .margin-fl-v p{ font-size: 14px; text-indent: 2em; margin: 26px 0; width: 580px; height: auto; float: left; } .margin-h{ width: 580px; margin-right: 10px; /*overflow: hidden;*/ /*text-align: justify;*/ /*text-justify: inter-ideograph;*/ /*clear: both;*/ font-size: 14px; /*line-height: 24px;*/ padding-bottom: 20px; /*word-wrap: break-word;*/ } .margin-h p{ font-size: 14px; text-indent: 2em; margin: 26px 0; } .margin-h2{ width: 1300px; margin-right: 10px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; clear: both; font-size: 14px; line-height: 24px; padding-bottom: 20px; word-wrap: break-word; } .margin-h2 span{ font-size: 14px; text-indent: 2em; margin: 26px 26px; } .margin-div{ width: 1300px; margin-right: 10px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; clear: both; font-size: 14px; line-height: 24px; padding-bottom: 20px; word-wrap: break-word; } .margin-div div{ font-size: 14px; text-indent: 2em; margin: 26px 0; } .margin-result{ width: 1300px; margin-right: 10px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; clear: both; font-size: 14px; line-height: 24px; padding-bottom: 20px; word-wrap: break-word; } .margin-result div{ font-size: 14px; text-indent: 2em; margin: 50px 10px 100px 20px; } </style> </head> <body> <div class="margin"> <p>关于margin的测试，网易新闻阅读界面，div中包含若干个p标签，每个p标签都是margin:26px 0;但是上下两个p标签的间距是27px，而不是27*2px</p> <p>这是为什么呢，我们来研究一下</p> <p>通过测试可见，margin边距是按照border开始算的，而不是按照外边距的位置开始算</p> </div> <div class="margin-fl-h"> <p>我们再来测试一下横向边距</p> <p>看看在宽度一定的情况下，横向设置的边距是不是同样以border开始算而忽略margin。</p> <P>结果显而易见，I’m wrong！</P> </div> <div class="margin-fl-v"> <p>初步看出好像横向设置的边距起作用了</p> <p>那么这是不是float:left的作用，咱么来测试一下垂直情况下，margin的表现</p> <p>好了，现在可以断定，在添加了float:left的情况下，margin不会忽视其他盒子模型的margin，无论是水平还是垂直</p> <p>但是在不添加float的情况下，盒子模型默认垂直排列，好像是不考虑其他盒子模型的margin</p> </div> <div class="margin-h"> <p>我们先考虑是不是div中的某些属性导致了p标签排版不考虑margin</p> <p>我们删掉一下div的属性，看看结果</p> <p>有办法在不添加float：left的情况下，让p标签横向排列吗？暂时想不到</p> <p>那只有换成行内元素span看看了，请看下面</p> </div> <div class="margin-h2"> <span>如果把p标签换成span呢，span是行内元素，不存在margin属性</span> <span>我们来试一下，不过好像左右的margin和padding可以起作用，结果很遗憾，margin在被考虑在内了</span> </div> <div class="margin-div"> <div>换成div看看</div> <div>不添加float属性</div> </div> <div class="margin-result" > <div>最后得到这样的结论，任何情况下，元素的margin都是要考虑别的元素的margin属性的，</div> <div>但是如果是不添加任何float属性的情况下，靠块状元素自己垂直排列，块状元素的某个外边距是不被考虑的</div> <div>我们弄一个特殊的边距来试一试</div> <div>结论得出</div> <div>在块状元素自行换行的特效下，他是不考虑被换行的元素的上外边距的</div> <div style="margin: 200px 10px 120px 20px">我么来整个特殊的大的上margin来试试，可以看出改行上下边距都是以它自己的为准的</div> <div>卧槽，看来结论错误了</div> <div>正确答案是，两个都被考虑了，以对方的border位置开始算的这个定律没有被打破，但是谁的大，就按谁的来，只考虑大的，小的被忽略了</div> <div style="padding: 10px 20px 30px 40px">如果加上padding呢,可以看出确实是以border为准的</div> </div> 找到一个参考文档，这玩意叫边间堆叠。<a href="http://www.webshu.net/jiaocheng/web/CSS/200804/7732.html">http://www.webshu.net/jiaocheng/web/CSS/200804/7732.html</a> http://www.zhihu.com/question/19823139 </body> </html>
