margin兼容之margin-top的传递问题(面试题)

问题: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>