Latest web development tutorials

CSS Margin(外邊距)

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


Margin

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

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

可能的值

說明
auto 設置瀏覽器邊距。
這樣做的結果會依賴於瀏覽器
length 定義一個固定的margin(使用像素,pt,em等)
% 定義一個使用百分比的邊距

Remark Margin可以使用負值,重疊的內容。


<h2Margin - 單邊外邊距屬性

在CSS中,它可以指定不同的側面不同的邊距:

實例

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

嘗試一下»


Margin - 簡寫屬性

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

所有邊距屬性的縮寫屬性是"margin":

實例

margin:100px 50px;

嘗試一下»

margin屬性可以有一到四個值。 /p>

  • 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 設置元素的上外邊距。