詳解css的外邊距margin的使用

 這篇文章詳解css的外邊距margin的使用

h2{margin:10px 0;}
p{margin:20px 0;}
......<h2>这是一个标题</h2><p>
    <h2>这是又一个标题</h2></p>本例中，第一个h2的margin-bottom（10px），p的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。

#語法：

margin：[ 55eb98409621aae9f8177db81340893d | auto ]{1,4} | inherit

預設值：看每個獨立屬性

適用於：所有元素，除非table | inline-table | table-caption 的表格類別元素之外

繼承性愛：無

#1##性愛：是

##計算值

：看每個獨立屬性

• 相關屬性

  ：[ margin-top ] || [
margin-right
• ] || [ margin-bottom ] || [

  margin-left

  ]
•  

  取值：##auto：水平（預設）書寫模式下，margin-top/margin-bottom計算值為0，margin-left/margin-right取決於可用空間。詳見：margin系列之keyword auto

d82af2074b26fcfe177e947839b5d381： 用長度值定義外補白。可以為負值

42c97a047d75abc12b9b351eb8562711： 用百分比來定義外補白。在水平（預設）書寫模式下，參考其包含區塊width進行計算，其它狀況參考height ，可以為負值

•  

說明：

• 檢索或設定
物件
• 四邊的外延邊距。

• 如果提供全部四個參數值，將依照上、右、下、左的順序作用於四邊。

• 如果只提供一個，將用於全部的四邊。

• 如果提供兩個，第一個用於上、下，第二個用於左、右。

• 如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

非替代(non-Replaced)行內元素可以使用該屬性設定左、右兩邊的外補丁；若要設定上、下兩邊的外補丁，必須先使該物件表現為區塊級或內聯區塊級。

外延邊距總是透明。

某些相鄰的margin會發生合併，我們稱之為margin折疊：

########

h2{margin:10px 0;}
p{margin:20px 0;}
......<h2>这是一个标题</h2><p>
    <h2>这是又一个标题</h2></p>本例中，第一个h2的margin-bottom（10px），p的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。

###### ####### #########父元素與第一個/最後一個子元素會合併margin######

以上是詳解css的外邊距margin的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！