得到的结果： 出现了子元素的margin-top属性跑到父元素边界外，这是因为父子的margin属性在垂直方向发生了重叠。 解决办法： 1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 2、为父元素添加overflow：hidden；样式即可（完美） 3、为父元素或者子元素声明浮动（float：left；可用） 4、为父元素添加border（border:1px solid transparent可用） 5、为父元素或者子元素声明绝对定位 例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .outer{ width: 100px; height: 100px; background: blue; overflow: hidden; } .inner{ width: 80px; height: 50px; margin-top: 20px; background: red; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>得到的效果：
