问题:margin的兼容margin-top的传递
描述:大盒子里面嵌套小盒子,给小盒子添加margin-top值,不但没有实现和大盒子之间的间距,反而传递到大盒子上,导致整体下移
解决兼容性问题:
- overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏)
- padding-top:1px 这种方法会影响最后实际的高度，需要再高度height的基础上减掉,才不会影响最后实际的高度
- border-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
- 给子元素的margin-top值改为给父元素加padding-top这样就避免了使用margin-top值导致的传递问题(转移了我们的目标对象)
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 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 /* ===========================无情分割线======================= */ 23 /*解决方法1*/ 24 /* .wrap{ 25 300px; 26 height: 300px; 27 background-color:#f90; 28 overflow: hidden; 29 } */ 30 /*解决方法2*/ 31 /* .wrap{ 32 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 300px; 50 height: 300px; 51 background-color:#f90; 52 padding-top: 20px; 53 } 54 .inner{ 55 /* margin-top: 20px; */ 56 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>