首頁 > 其他

談外margin collapsing(外邊距疊加)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • margin collapsing現象
  • margin collapsing與方向無關
  • margin collapsing僅僅發生在BFC
  • margin collapsing可能跨元素
  • margin collapsing不能跟padding(內邊距)摺疊
  • margin collapsing不能跟跨越BFC

讀過李松峰老師翻譯的新書中《CSS設計師指南（第3版》的外邊距疊加部分( http://www.ituring.com.cn/article/16969)實在是有些捉急啊，這地方實在是有些沒寫到位，也有錯誤（如“疊加的只是垂直外邊距，水平外邊距不疊加”）

margin collapsing現象

BFC（block formatting context）中相鄰的兩個block-level的盒，上一個box的下邊距會跟下一個box的上邊距發生疊加，即兩者取最大的，而不是相加：

run

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px    }    #blue {        margin:10px 10px 10px 10px    }    #red {        margin:10px 10px 10px 10px    }</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div><div id="red" style="background:pink;height:100px;width:100px;"></div></body></html>
margin collapsing與方向無關

《CSS設計師指南（第3版》中講到“疊加的只是垂直外邊距，水平外邊距不疊加”，這個說法是錯誤的，疊加與否完全取決於兩個box是否是位於同一BFC的兩個相鄰box，與水平垂直無關，下面例子中，更改了body的writing-mode，於是疊加發生在了水平方向（僅ie可看）

run 

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px    }    #blue {        margin:10px 10px 10px 10px    }    #red {        margin:10px 10px 10px 10px    }
    body {
        writing-mode:tb-rl;
    }</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div><div id="red" style="background:pink;height:100px;width:100px;"></div></body></html>
margin collapsing僅僅發生在BFC
margin collapsing不發生在IFC

當把元素的display屬性設為inline-block，它們都位於IFC當中，所以不論水平還是豎直方向，都不會發生疊加：

run 

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px;
        display:inline-block;    }    #blue {        margin:10px 10px 10px 10px;
        display:inline-block;     }    #red {        margin:10px 10px 10px 10px;
        display:inline-block;    }
</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div><br/><div id="red" style="background:pink;height:100px;width:100px;"></div></body></html>
margin collapsing不發生在floats

當把元素的float屬性設為left，它們都不在正常流中，更不在BFC中了，同樣不論水平還是豎直方向，都不會發生疊加：

run

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px;
        float:left;    }    #blue {        margin:10px 10px 10px 10px;
        float:left;     }    #red {        margin:10px 10px 10px 10px;
        clear:left;
        float:left;    }
</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div></body></html>
margin collapsing可能跨元素

當一個容器既沒有border又沒有padding時，它的第一個子box的的margin也能跟它的上一個容器的margin發生疊加：

run 

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px;
    }    #blue {        margin:5px 10px 10px 10px;
    }    #red {        margin:10px 10px 10px 10px;
    }
</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;">
    <div id="red" style="background:pink;height:100px;width:100px;"></div>
</div></body></html>
margin collapsing不能跟padding(內邊距)摺疊

有padding(內邊距)的時候，上一節的情況不發生：

run 

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px;
    }    #blue {        margin:10px 10px 10px 10px;
        padding:10px 10px 10px 10px;
    }    #red {        margin:10px 10px 10px 10px;
    }
</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;">
    <div id="red" style="background:pink;height:100px;width:100px;"></div>
</div></body></html>

 

margin collapsing不能跟跨越BFC

當一個容器在其內部建立新的BFC時，跨元素摺疊的情況也不會發生。

run 

<!doctype HTML><html><head><style type="text/css">    #green {        margin:10px 10px 10px 10px;
    }    #blue {        margin:10px 10px 10px 10px;
        overflow:hidden;
    }    #red {        margin:10px 10px 10px 10px;
    }
</style></head><body><div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;">
    <div id="red" style="background:pink;height:100px;width:100px;"></div>
</div></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More