CSS 外邊距(十三)

2021-04-19 05:00:06 字數 1270 閱讀 2526

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

css 邊距屬性定義元素周圍的空間。可以用用負值對內容進行疊加。通過使用單獨的屬性,可以對上、右、下、左的外邊距進行設定。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。

大多數正常流元素間出現的間隔都是因為存在元素的外邊距。設定外邊距會在元素外建立額外的「空白」。「空白」通常指不能放其它元素的區域,而且在這個區域中可以看到父元素的背景。

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

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

h1
margin 接受很多長度單位,比如畫素、英吋、公釐或 em 等。不過 margin 的預設值是 0,所有如果沒有為 margin 宣告乙個值,就不會出現外邊距。

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

h1
這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的:

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

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

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

設定文字的左外邊距

本例演示如何設定文字的左外邊距。

設定文字的右外邊距

本例演示如何設定文字的右外邊距。

設定文字的上外邊距

本例演示如何設定文字的上外邊距。

設定文字的下外邊距

本例演示如何設定文字的下外邊距。

所有的外邊距屬性在乙個宣告中。

本例演示如何將所有的外邊距屬性設定於乙個宣告中。

屬性描述margin

簡寫屬性。在乙個宣告中設定所有外邊距屬性。

margin-bottom

設定元素的下外邊距。

margin-left

設定元素的左外邊距。

margin-right

設定元素的右外邊距。

margin-top

設定元素的上外邊距。

CSS外邊距疊加

盒模型概念 盒模型是css的基石之一,它指定元素如何顯示及 在某種程度上 如何相互互動。頁面上的每乙個元素都被看做乙個矩形框,這個框右元素的內容 內邊距 邊框和外邊距組成,如下圖 如果給元素新增背景,背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的,一般使用它控...

CSS 外邊距合併

做了個div 巢狀div的實驗,父div和子div都有margin邊距 發現margin top 10px 根本不起作用,後來發現是外邊框合併問題,他會合併取兩者大的邊距,如果子div的邊距是30px 那麼父子div還是會貼著 只是,父div外邊距會變成30的效果 外邊距合併指的是,當兩個垂直外邊距...

CSS外邊距合併

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 疊加 是乙個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外...