div預設外邊距是多少 CSS 外邊距

2021-10-14 05:22:24 字數 2134 閱讀 3999

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

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

設定外邊距的最簡單的方法就是使用 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 外邊距（十三）

css 外邊距 margin 屬性定義元素周圍的空間。css 邊距屬性定義元素周圍的空間。可以用用負值對內容進行疊加。通過使用單獨的屬性，可以對上 右 下 左的外邊距進行設定。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。大多數正常流元素間出現的間隔都是因為存在元素的外邊距。設定外邊距會在元素外建...

CSS外邊距疊加

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

CSS 外邊距合併

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