Collapsing margins

Posted on Edited on In Views: Disqus:

 

Collapsing margins 是個很詭異的現象，我現在還不完全能夠掌握，

暫且先引用CSS 失控的 Margin top文章，知道如何避免 Collapsing margins 就好，

等待有開竅的一天。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .wrap {
            margin: 0 auto;
            max-width: 480px;
        }
        .header {
            margin-top: 30px;
            padding: 20px;
        }
        .bg-pink {
            background-color: pink;
        }
        .bg-orange {
            background-color: #FFEFD3;
        }
        .collapsing-1 .box {
            margin-top: 30px;
            margin-left: 30px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #36BEFF;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header class="header bg-pink">
            <p>內元素直接用 margin 推移</p>
        </header>
        <div class="collapsing-1 bg-orange">
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

你會發現 class="box" 元素的 margin 會擴張到 class="collapsing-1" 元素外，

而從 class="collapsing-1" 元素來看，卻感覺是 class="collapsing-1" 元素的 margin 塌陷到 class="box" 元素裡

 

如果要解決問題，那就要避開以下三點

1、內外層均為 “塊狀” 元素。

2、外層塊狀元素沒有 border、padding、overflow。

3、內層第一個塊狀元素(空元素不算)，不包含 float、absolute。

 

解決範例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .wrap {
            margin: 0 auto;
            max-width: 480px;
        }
        h4 {
            font-size: 24px;
            margin-top: .5em;
            margin-bottom: .5em;
            text-align: center;
        }
        pre {
            padding: 20px;
            background-color: #ddd;
            color: #777;
        }
        .header {
            margin-top: 30px;
            padding: 20px;
        }
        .bg-pink {
            background-color: pink;
        }
        .bg-orange {
            background-color: #FFEFD3;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #36BEFF;
        }
        .collapsing-1 .box {
            margin-top: 30px;
            margin-left: 30px;
        }
        .resovle-1 {
            padding-top: 30px;
            padding-left: 30px;
        }
        .resovle-2 {
            border: 1px solid yellow;
        }
        .resovle-3 .box {
            display: inline-block;
        }
        .resovle-4:after {
            content: "";
            display: table;
            clear: both;
        }
        .resovle-4 .box {
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h4>Collapsing margins 解決方案</h4>
        <header class="header bg-pink">
            <p>1. 透過外元素的 padding</p>
        </header>
        <div class="resovle-1 bg-orange">
            <div class="box"></div>
        </div>
        <pre>.resovle-1 {
          padding-top: 30px;
          padding-left: 30px;
        }</pre>
        <header class="header bg-pink">
            <p>2. 外元素加入 border</p>
        </header>
        <div class="collapsing-1 resovle-2 bg-orange">
            <div></div>
            <a href=""></a>
            <div class="box"></div>
        </div>
        <pre>.resovle-2 {
          border: 1px solid yellow;
        }</pre>
        <header class="header bg-pink">
            <p>3. 內元素更改屬性 (inline-block)</p>
        </header>
        <div class="collapsing-1 resovle-3 bg-orange">
            <div></div>
            <a href=""></a>
            <div class="box"></div>
        </div>
        <pre>.resovle-3 .box{
          display: inline-block;
        }</pre>
        <header class="header bg-pink">
            <p>4. 內元素更改屬性 (float)</p>
        </header>
        <div class="collapsing-1 resovle-4 bg-orange">
            <div></div>
            <a href=""></a>
            <div class="box"></div>
        </div>
        <pre>.resovle-4:after{
          content: "";
          display: table;
          clear: both;
        }
        .resovle-4 .box{
          float: left;
        }</pre>
    </div>
</body>
</html>

 

參考資料：

CSS 失控的 Margin top

Collapsing margins

理解邊界重疊的原因