问题:margin的兼容margin-top的传递

描述:大盒子里面嵌套小盒子,给小盒子添加margin-top值,不但没有实现和大盒子之间的间距,反而传递到大盒子上,导致整体下移

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

解决兼容性问题:

  1. overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏)
  2. padding-top:1px 这种方法会影响最后实际的高度，需要再高度height的基础上减掉,才不会影响最后实际的高度
  3. border-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
  4. 给子元素的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     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 /*     ===========================无情分割线======================= */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>