CSS margin 屬性簡介

2022-01-13 12:22:01 字數 1921 閱讀 4846

設定外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位,可以是畫素、英吋、公釐或 em。

margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。下面的宣告在 h1 元素的各個邊上設定了 1/4 英吋寬的空白:

h1
下面的例子為 h1 元素的四個邊分別定義了不同的外邊距,所使用的長度單位是畫素 (px):

h1
與內邊距的設定相同,這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的:

margin: top right bottom left
另外,還可以為 margin 設定乙個百分比數值:

p
百分數是相對于父元素的 width 計算的。上面這個例子為 p 元素設定的外邊距是其父元素的 width 的 10%。

margin 的預設值是 0,所以如果沒有為 margin 宣告乙個值,就不會出現外邊距。但是,在實際中,瀏覽器對許多元素已經提供了預定的樣式,外邊距也不例外。例如,在支援 css 的瀏覽器中,外邊距會在每個段落元素的上面和下面生成「空行」。因此,如果沒有為 p 元素宣告外邊距,瀏覽器可能會自己應用乙個外邊距。當然,只要你特別作了宣告,就會覆蓋預設樣式。

還記得嗎?我們曾經在前兩節中提到過值複製。下面我們為您講解如何使用值複製。

有時,我們會輸入一些重複的值:

p
通過值複製,您可以不必重複地鍵入這對數字。上面的規則與下面的規則是等價的:

p
這兩個值可以取代前面 4 個值。這是如何做到的呢?css 定義了一些規則,允許為外邊距指定少於 4 個值。規則如下:

下圖提供了更直觀的方法來了解這一點:

換句話說,如果為外邊距指定了 3 個值,則第 4 個值(即左外邊距)會從第 2 個值(右外邊距)複製得到。如果給定了兩個值,第 4 個值會從第 2 個值複製得到,第 3 個值(下外邊距)會從第 1 個值(上外邊距)複製得到。最後乙個情況,如果只給定乙個值,那麼其他 3 個外邊距都由這個值(上外邊距)複製得到。

利用這個簡單的機制,您只需指定必要的值,而不必全部都應用 4 個值,例如:

h1 	/* 等價於 0.25em 1em 0.5em 1em */

h2 /* 等價於 0.5em 1em 0.5em 1em */

p /* 等價於 1px 1px 1px 1px */

這種辦法有乙個小缺點,您最後肯定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設定為 20 畫素,下外邊距和右外邊距設定為 30 畫素。在這種情況下,必須寫作:

p
這樣才能得到您想要的結果。遺憾的是,在這種情況下,所需值的個數沒有辦法更少了。

再來看另外乙個例子。如果希望除了左外邊距以外所有其他外邊距都是 auto(左外邊距是 20px):

p
同樣的,這樣才能得到你想要的效果。問題在於,鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距,請使用單邊外邊距屬性。

您可以使用單邊外邊距屬性為元素單邊上的外邊距設定值。假設您希望把 p 元素的左外邊距設定為 20px。不必使用 margin(需要鍵入很多 auto),而是可以採用以下方法:

p
您可以使用下列任何乙個屬性來只設定相應上的外邊距,而不會直接影響所有其他外邊距:

乙個規則中可以使用多個這種單邊屬性,例如:

h2
當然,對於這種情況,使用 margin 可能更容易一些:

p
不論使用單邊屬性還是使用 margin,得到的結果都一樣。一般來說,如果希望為多個邊設定外邊距,使用 margin 會更容易一些。不過,從文件顯示的角度看,實際上使用哪種方法都不重要,所以應該選擇對自己來說更容易的一種方法。

CSS margin樣式屬性

charset utf 8 title span instyle head style border 1px solid red height 300px width 300px margin bottom 20px class in style background color black div...

CSS margin屬性取值

margin表示乙個元素的外邊距。取值為正值時,表示相對於正常流離鄰近元素更遠,而取負值時,使其更近 但是,設定margin後,四個方向的表現形式不同 div id negtive top div margin top 50px 自身向上移動50px div margin left 50px 自身向...

CSS margin屬性與用法教程

margin屬性是css用於在乙個宣告中設定所有 margin 屬性的簡寫屬性,margin是css控制塊級元素之間的距離,它們之間是透明不可見的。margin屬性包含了margin left 距左元素塊距離 設定距左內邊距 margin top 距頭頂 上 元素塊距離 設定距頂部元素塊距離 mar...