1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style type="text/css"> 11 *{margin:0px; padding:0px;} 12 .box{ 13 width:200px; 14 height:200px; 15 background:blue; 16 /* padding:1px; *//*必须有padding 或者border, .bb1中margin才能显示出边距*/ 17 border:5px solid blue; 18 /* margin-top:30px; */ 19 } 20 .bb1{ 21 width:190px; 22 height:190px; 23 background:#ff00ff; 24 margin-top:20px; /*子级边距不直接作用于父级上边距,而是传递给父级;*/ 25 } 26 27 .box1{ /*并别关系隔开距离的话,距离=外边距较大的那一个;可能会存在溢出,例如下边那个上外边距>上边那个下外边距时距离为下外边距.*/ 28 width:200px; 29 height:200px; 30 background:#ff6666; 31 margin-bottom:100px; 32 } 33 .box2{ 34 width:200px; 35 height:200px; 36 background:#6600cc; 37 margin-top:60px; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="box"> 43 <div class="bb1"></div> 44 </div> 45 46 <div class="box1"></div> 47 <div class="box2"></div> 48 </body> 49 </html>