父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。
html代码如下
1 <style> 2 *{ 3 margin : 0; 4 padding : 0; 5 } 6 body{ 7 background : #eee; 8 } 9 .box1{ 10 width : 100px; 11 height : 100px; 12 background : pink; 13 } 14 .box2{ 15 width : 50px; 16 height :50px; 17 margin-top : 20px; 18 background : red; 19 } 20 21 </style> 22 </head> 23 <body> 24 <div class="box1"> 25 <div class="box2"></div> 26 </div> 27 </body>
什么原因呢？
解决方案：
父元素设置overflow:hidden 或者padding或者border。
原文：http://www.cnblogs.com/lhat/p/5171101.html