CSS margin 屬性和CSS 單邊外邊距屬性

2021-10-02 20:52:07 字數 1345 閱讀 6116

圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的"空白"。

設定外邊距的最簡單的方法就是使用 margin 屬性,這個屬性接受任何長度單位、百分數值甚至負值。

css margin 屬性

設定外邊距的最簡單的方法就是使用 margin 屬性。margin用於設定物件標籤之間距離間隔,比如2個上下排列的div盒子,我們就可以使用margin樣式實現上下2個盒子間距。

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

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

h1
根據實踐經驗,如果僅僅是上面這些處理,往往是無法應對實際需求的,存在一些「致命問題」。新建乙個前端學習qun438905713,在群裡大多數都是零基礎學習者,大家相互幫助,相互解答,並且還準備很多學習資料,歡迎零基礎的小夥伴來一起交流。

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

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

另外,還可以為 margin 設定乙個百分比數值:p ,這樣p 元素的外邊距是其父元素的 width 的 10%。

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

利用margin實現布局居中,基礎單詞:marign:0 auto;

即可實現物件居中,但需要乙個條件,那就是該物件上級一定要設定text-align:center內容居中屬性樣式。有的瀏覽器body標籤不設定text-align:center內容居中樣式,其下級包含物件設定了margin:0 auto也會讓其布局居中,但為了相容各大瀏覽器建議對body設定乙個text-align:center屬性樣式。

css 單邊外邊距屬性

您可以使用單邊外邊距屬性為元素單邊上的外邊距設定值。假設您希望把 p 元素的左外邊距設定為 20px,可以採用以下方法:

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

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

h2
當然也可以寫為:p ,簡寫的邏輯仍為:上、右、下、左。

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 屬性接受任何長度單位,可以是畫素 英吋 公釐或 em。margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。下面的宣告在 h1 元素的各個邊上設定了 1 4 英吋寬的空白 h1下面的例子為 h1 元素的四個邊分別定義...

CSS margin屬性取值

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