CSS margin(外邊距)

CSS margin(外邊距)屬性定義元素周圍的空間。

margin

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

margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。

可能的值

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

Remark 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
Examples

更多例項

文字的上邊距設定使用釐米值
這個例子演示瞭如何設定一個使用釐米值的文字的頂部margin。

Set 使用百分比值設定文字的下邊距
這個例子演示瞭如何設定使用百分比值的下邊距，相對於包含的元素的寬度。

所有的CSS邊距屬性

屬性 描述
margin 簡寫屬性。在一個宣告中設定所有外邊距屬性。
margin-bottom 設定元素的下外邊距。
margin-left 設定元素的左外邊距。
margin-right 設定元素的右外邊距。
margin-top 設定元素的上外邊距。