1. 程式人生 > >CSS盒子模型之外邊距(margin)

CSS盒子模型之外邊距(margin)

  1. 外邊距的設定
    外邊距跟邊框一樣,分為上、右、下、左4個方向的邊距
    |屬性|描述|
    |margin|簡寫屬性,同時設定邊框4個方向的外邊距|
    |margin-bottom|設定下外邊距|
    |margin-left|設定左外邊距|
    |margin-right|設定右外邊距|
    |margin-top|設定上外邊距|
    外邊距設定語法如下:
margin:margin_value [margin_value] [margin_value] [margin_value];
margin-方向:margin_value;

margin_value引數描述
|引數值|描述|
|auto|瀏覽器計算外邊距|
|length|以px、em、cm等為單位的數值作為外邊距值,可取正、負|
|%|基於父級元素的寬度來計算外邊距|
|inherit|繼承父級元素的外邊距|

  • 指定1個值時,表示4個方向的外邊距一樣
  • 指定2個值時,第一個值設定上、下外邊距,第二個值設定左、右外邊距(在實際應用中常使用margin: 0 auto,實現水平居中)
  • 指定3個值時,第一個值設定上外邊距,第二個值設定左、右外邊距,第三個值設定下外邊距
  • 指定4個值時,各個值按順時針方向依次設定上、右、下、左外邊距
    注:父子元素之間的邊距既可以用padding定義,也可以使用margin定義,當父子邊距定義為內邊距時,應在父級元素中是哦應該能padding屬性設定內邊距;當父子邊距定義為外邊距時,則應在子級元素中使用margin屬性設定外邊距。

2.盒子外邊距合併

  • 相鄰元素外邊距合併
    兩個相鄰標準流塊級元素,上面元素的margin-bottom邊距會和下面的margin-top邊距合併,如果兩個外邊距全為正值,合併後的邊外邊距等於margin-bottom邊距和margin-top邊距中最大的那個邊距,這種現象稱為margin的“塌陷”,即較小的margin塌陷到較大的margin中了。如果兩個外邊距存在負值,合併的外邊距的高度等於這些發生合併的外邊距的和。當和為負數時,相鄰元素在垂直方向上發生重疊,重疊深度的呢關於外邊距和的絕對值;當和為0時,兩個塊級元素無縫連線,示意圖如下:
    這裡寫圖片描述

    • 包含(父子)元素外邊距合併
      當外層元素和內層元素形成父子關係,也稱巢狀關係時,在某些條件下,父子元素外邊距會合並,條件是:當父元素沒有內容或內容在子元素的後面且沒有內邊距或沒有邊框時,子元素的上外邊距將和父元素的上外邊距合併為一個上外邊距,且為值最大的那個上外邊距,同時該上外邊距作為父元素的上外邊距。示意圖如下:要防止父、子元素的上外邊距合併,只需在子元素前面設定父元素內容或保持父元素內容不變的情況下新增內邊距或新增邊框。
      這裡寫圖片描述

    • 相鄰盒子之間的水平間距
      行內元素是指元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下才會換行。兩個相鄰元素之間的水平間距等於左邊元素的margin-right+右邊元素的margin-left,如果相加的margin-right和margin-left分別為正值,則拉開兩元素之間的距離,否則拉近兩者之間的距離,如果margin-right+margin-left的和為0,則兩元素無縫相連;如果和為負數,則右邊元素重疊在左邊元素上,重疊的深度等於負數的絕對值。示意圖如下:
      這裡寫圖片描述