教你玩轉CSS margin(外邊距)

margin

margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是徹底透明的。

margin 能夠單獨改變元素的上，下，左，右邊距，也能夠一次改變全部的屬性。

 

可能的值

值 | 說明 –|— auto | 設置瀏覽器邊距。 這樣作的結果會依賴於瀏覽器 length | 定義一個固定的margin（使用像素，pt，em等） % | 定義一個使用百分比的邊距

Margin可使用負值，重疊的內容。

Margin - 單邊外邊距屬性

在CSS中，它能夠指定不一樣的側面不一樣的邊距：

    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

 

 Margin - 簡寫屬性

爲了縮短代碼，有可能使用一個屬性中margin指定的全部邊距屬性。這就是所謂的簡寫屬性。

全部邊距屬性的簡寫屬性是 margin :

    margin:100px 50px;

margin屬性能夠有一到四個值。

• margin:25px 50px 75px 100px;

  • 上邊距爲25px
  • 右邊距爲50px
  • 下邊距爲75px
  • 左邊距爲100px

• margin:25px 50px 75px;

  • 上邊距爲25px
  • 左右邊距爲50px
  • 下邊距爲75px

• margin:25px 50px;

  • 上下邊距爲25px
  • 左右邊距爲50px

• margin:25px;

  • 全部的4個邊距都是25px

全部的CSS邊距屬性 

屬性	描述
margin	簡寫屬性，在一個聲明中設置全部的外邊距屬性
margin-bottom	設置元素的下外邊距
margin-left	設置元素的左外邊距
margin-right	設置元素的右外邊距
margin-top	設置元素的上外邊距