父子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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。