• 語法:選擇器{margin:1 2 3 4}
    1.屬性值:margin-top (指定上邊界)
    2.屬性值:margin-right (指定右邊界)
    3.屬性值:margin-bottom (指定下邊界)
    4.屬性值:margin-left (指定左邊界)
  • 瀏覽器支援:IE、NetScape、Opera、Safari、Firefox
  • 元素繼承:無繼承性
  • 適用元素:全部元素
  • 說明:
    1. margin 屬性為複合屬性,可指定複數屬性值,各屬性值以 空白 格開
    2. 若給定全部4個邊界屬性設定,屬性值須按上、右、下、左 順時針
      的方向給值
    3. 若只給一個屬性值,則該值會套用到全部4個邊界
    4. 若給二個值,則第1個會用於上、下邊界,第2個值會套用到左、右邊界
    5. 若給三個值,則第1個會用於上邊界,第2個值同時用於左右邊界,
      第3個值用於下邊界


例1:個別指定4個邊界不同的間距
.test1 {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}

例2:縮寫指定4個邊界不同的間距(依序上、右、下、左 順時針順序)
.test2 {
margin: 10px 20px 30px 40px;
}

例3:指定3個值但可以給4個邊界間距(依序上、左右、下順序)
.test3 {
margin: 10px 20px 10px;
}

例4:指定2個值但可以給4個邊界間距(依序上下、左右順序)
.test4 {
margin: 10px 10px;
}

例5:指定4個邊界一樣間距
.test5 {
margin: 10px;
}

Leave a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *