父子div margin重叠问题

时间 2019-11-09

标签父子 div margin 重叠问题栏目 CSS 繁體版

原文原文链接

前段时间朋友作项目遇到一个问题，说是父子div，想让子div下移50px，我随口就说“直接margin-top就能够了”，结果，大家没猜错，打脸了，好痛！spa

这是我本身试了一遍的代码：code

<body>
  <div class="big">
    <div class="small"></div>
  </div>
 </body>

以及样式：blog

<style>
    body{
        margin:0px;
        padding:0px;
    }
    .big{
        width:400px;
        height:400px;
        background:#ccc;
    }
    .small{
        width:200px;
        height:200px;
        background:#ff0000;
　　　　　margin-top:50px;
    }
  </style>

结果出来就变成这样了it

这是什么鬼？我设置的只是子div啊，为何父子一块移动了？最后通过多方百度得知缘由：io

　　全部毗邻的两个或者多个盒元素的margin会合并为一并共享之。毗邻的意思是同级或嵌套的盒元素，而且他们之间没有非空内容、padding或者border分隔。class

看到这个就能够想到几个解决的方法了，一个是增长一个子元素的同级元素并放在该元素以前，也就是：百度

<div class="big">
    <div class="add">增长的内容</div>
    <div class="small"></div>
</div>

还有就是给父元素增长padding属性或者border属性，给子元素加是没有效果的。方法

固然还有其余的方法，好比父元素增长overflow:hidden属性，给父元素增长浮动或者position:absolute属性也是能够的。im