margin的兩個有趣現象：margin合併和margin塌陷

時間 2019-11-20

標籤 margin 兩個有趣現象合併欄目 CSS 简体版

原文原文鏈接

margin合併css

當兩個元素在垂直方向並列，分別設置margin值時會發生一個margin合併的現象html

舉個例子，有兩個div，垂直並列，box1設置margin-bottom:20px，box2設置margin-top:50px，spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    *{
        margin：0;
        padding: 0;
    }
    div{
        width: 50px;
        height: 50px;
    }
    #box1{
        margin-bottom: 20px;
        background: red;
    }
    #box2{
        margin-top: 50px;
        background: blue;
    }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

按照通常的思惟，這兩個div之間的距離就應該是70px，事實並不是如此，兩個div之間的距離只有50px，由於兩個div的margin重疊，它會取最大值3d

通常來講margin合併不常見，由於只需設置一個div的margin來達到兩者之間的距離就能夠了code

margin塌陷htm

margin塌陷很常見，存在於嵌套關係的盒子之間。blog

有兩個div，box1包含box2，給box2一個margin-top:20px，讓box2和box1之間產生20px的距離it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    *{
        margin：0;
        padding: 0;
    }
    #box1{
        width: 100px;
        height: 100px;
        background: red;
    }
    #box2{
        width: 50px;
        height: 50px;
        margin-top: 20px;
        background: blue;
    }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

結果會發現box1和box2沒產生距離，反而是box1帶着box2離頁面頂端20pxclass

解決辦法：test

給父級盒子設置overflow:hidden
給父級盒子設置border
給父級盒子設置padding

1. margin合併
2. CSS之margin合併
3. margin合併整理
4. margin重疊現象
5. margin的重疊現象
6. margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;
7. margin
8. Margin
9. margin-top 外邊距合併
10. margin外邊距合併
更多相關文章...
• PHP imageaffinematrixconcat - 連接兩個矩陣 - PHP參考手冊
• PHP NULL 合併運算符 - PHP 7 新特性
• ☆基於Java Instrument的Agent實現
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

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