1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1,.box2{ 8 width:200px; 9 height:200px; 10 } 11 .box1{ 12 background-color:orange; 13 /*设置一个下外边距*/ 14 margin-bottom:100px; 15 16 } 17 .box2{ 18 background-color:yellow; 19 /*设置一个上外边距*/ 20 margin-top:100px; 21 22 } 23 .box3{ 24 width:200px; 25 height:100px; 26 background-color:orange; 27 padding-top:100px; 28 29 } 30 .box4{ 31 width:100px; 32 height:100px; 33 background-color:red; 34 } 35 /* 36 垂直外边距的重叠(折叠) 37 -相邻的垂直方向的外边距会发生重叠现象 38 -兄弟元素 39 -兄弟元素之间的相邻垂直外边距会取两者中的较大值(两者都> 是正数) 40 -特殊情况 41 -如果相邻的外边距是一正一负则取两者的和 42 -如果响铃的外边距都是负值，则取两者中绝对值较大的 43 兄弟元素建相邻外边距的重叠，对于开发是有利的，所以我们不需> 要进行处理 44 -父子元素 45 -父子元素间相邻外边距，子元素会传递给父元素(上外边距) 46 -父子元素外边距的折叠会影响页面的布局，必须要进行处理 47 处理方法： 48 -给父元素添加一个上边框 49 -给父元素添加一个内边距，并且从父元素的高度上减去对 应的值也可以实现相同的效果 50 51 */ 52 </style> 53 </head> 54 <body> 55 <div class="box1"></div> 56 <div class="box2"></div> 57 <div class="box3"> 58 <div class="box4"></div> 59 </div> 60 </body> 61 </html>