iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
0

我們曾經在HTML篇章討論block元素與inline元素時,粗淺提到margin重疊。既然已經知道box model,終於可以來認識什麼是Collapsing margins。

CSS規範中對Collapsing margins的描述是:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

這意思是相連的box(可能是兄弟元素box或父子層關係的元素box),它們相鄰的margin重疊成一個margin

Margin collapse現象的特性如下:

  1. 在in-flow(普通流)裡的元素,而且參與同一個BFC(該概念會在之後介紹),所以下列情況不會發生margin collapse:
    • float元素
    • position為absolute的元素
    • root element(根元素)
  2. 相連元素沒有paddingborderclearfix、和line box隔開。
  3. 垂直排列的margin:
    • 相鄰兄弟元素的margin-bttommargin-top
    • 父元素跟第一個子元素的margin-top
    • 父元素跟最後一個子元素的margin-bottom
  4. 重疊後的值會取大的margin值。

範例

  • 相鄰兄弟元素的margin-bttommargin-top

    我們知道了margin在box model裡,通常是用來區隔元素跟元素距離,而某些HTML元素在預設值上就會有margin,我們可以拿<h1>元素跟<p>元素來示範兄弟元素的margin重疊現象。

    <h1>我是標題我是標題</h1>
    <p>我是段落我是段落我是段落我是段落</p>
    

    用開發者介面來看margin的區域:

    • <h1>元素的margin預設值是上下21.44px。
    • <p>元素的margin預設值是上下16px。
    • <h1>的margin-bottom跟<p>的margin-top重疊成一個margin。
    • 重疊後的margin值是21.44px,collapsing margin會留下比較大的margin值。
  • 父元素跟第一個子元素的margin-top

    父元素跟第一個子元素,它們垂直相鄰的margin-top會重疊。我們設父元素margin-top:50px,然後子元素margin-top:10px

    .outer {
        outline: 5px solid #000;
        width: 300px;
        height: 100px;
        margin-top: 50px;
    }
    
    .inner {
        width: 200px;
        height: 50px;
        margin: auto;
        background-color: pink;
        margin-top: 10px;
    }
    
    

    原本期待.innermargin-top: 10px可以讓子元素外邊緣跟父元素的內邊緣中間隔開10px。可是並沒有如願以償。

    因為它的margin-top跑到外面去跟父層的margin-top重疊在一塊了。

  • 父元素跟最後一個子元素的margin-bottom
    最後一個子元素的margin-bottom也跟父元素的margin-bottom垂直相鄰,所以它們各自的margin-bottom也會發生margin collapse現象,並取比較大的margin值。

了解margin collapse現象,可以讓我們在遇到這個情況時,知道為什麼margin值不照我們的想像走。其實margin collapse在標題元素跟段落元素時,是很方便的,它會自動幫我們重疊margin,才不會發生標題跟段落距離太遠的情況。

然而在其它時候可能會覺得困擾。但我們知道這個現象之後,可以改用padding避免margin collapse,順利設定兩個元素間的距離。

今天的筆記告一段落,明天見~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day22 CSS:Box-sizing
下一篇
Day24 CSS:淺談視覺格式化模型 Visual formatting model
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言