外邊距合並與溢出
阿新 • • 發佈：2018-12-13
editplus blue name scrip padding rds text css add
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>
外邊距合並與溢出