|
問題:margin的兼容margin-top的傳遞 描述:大盒子里面嵌套小盒子,給小盒子添加margin-top值,不但沒有實(shí)現(xiàn)和大盒子之間的間距,反而傳遞到大盒子上,導(dǎo)致整體下移
解決兼容性問題:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 /* .wrap{ 12 width: 300px; 13 height: 300px; 14 background-color:#f90; 15 } */ 16 .inner{ 17 margin-top: 20px; 18 width: 200px; 19 height: 200px; 20 background-color: aqua; 21 } 22 /* ===========================無(wú)情分割線======================= */ 23 /*解決方法1*/ 24 /* .wrap{ 25 width: 300px; 26 height: 300px; 27 background-color:#f90; 28 overflow: hidden; 29 } */ 30 /*解決方法2*/ 31 /* .wrap{ 32 width: 300px; 33 height: 299px; 34 background-color:#f90; 35 padding-top: 1px; 36 } */ 37 /* 解決方法3 */ 38 .wrap{ 39 width: 300px; 40 height: 299px; 41 background-color:#f90; 42 border: 0; 43 border-top-width: 1px; 44 border-style: solid; 45 border-color: transparent; 46 } 47 /* 解決方法4 */ 48 /* .wrap{ 49 width: 300px; 50 height: 300px; 51 background-color:#f90; 52 padding-top: 20px; 53 } 54 .inner{ 55 /* margin-top: 20px; */ 56 width: 200px; 57 height: 200px; 58 background-color: aqua; 59 } */ 60 </style> 61 </head> 62 <body> 63 <div class="wrap"> 64 <div class="inner"></div> 65 </div> 66 </body> 67 </html> |
|
|
