CSS中margin屬性詳解

margin屬性概述

margin是css層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性.

該接受任何長度單位，可以是畫素、英吋、公釐或 em。

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

屬性描述

margin

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

margin-bottom

設定元素的下外邊距。

margin-left

設定元素的左外邊距。

margin-right

設定元素的右外邊距。

margin-top

設定元素的上外邊距。

1.使用單獨屬性設定四邊的距離

#d2

2.直接使用margin屬性設定所有外邊距:

#d2

margin合併(摺疊)

注意,在使用css的margin屬性時,會出現margin屬性的合併(摺疊)的現象.

這種合併分為兩種: 並列元素的合併和巢狀元素的合併

1.並列元素的合併:

具體表現為:

​ 當兩個元素並列時，兩者相隔的外邊距，取的是兩者所設定margin的最大值。

例如:

2.巢狀元素的合併:

具體表現為:

​ 當兩個元素巢狀到一起,並且沒有內邊距或邊框把外邊距分隔開時,它們的外邊距也會發生合併

例如:

3.margin摺疊注意事項：

margin摺疊只發生在塊級元素上；

浮動元素的margin不與任何margin發生摺疊；

設定了屬性overflow且值不為visible的塊級元素，將不與它的子元素發生margin摺疊；

絕對定位元素的margin不與任何margin發生摺疊；

根元素的margin不與其它任何margin發生摺疊；

注意,在實際開發中.margin-bottom和margin-top需要特別說明

也就是說,普通的行內元素是無法使用該屬性的.

例如:

內容體

我是span
內容體

解決方案:

當元素是行內元素時，不使用該屬性

把該元素轉換為塊級元素或者行內塊級元素

塊級元素

總是在新行上開始，佔據一整行；

高度，行高以及外邊距和內邊距都可控制；

寬度與內容無關；

它可以容納任何元素。

行級元素

和其他元素都在一行上；

不可以設定寬高，其寬度隨著內容增加，高度隨字型大小而改變，寬高只與內容有關，

行內元素只能容納文字或者其他行內元素。

可以設定外邊界margin，但margin不對上下起作用，只能對左右起作用，

轉換​ 行級元素與塊級元素之間可以通過css的display屬性進行轉換

擴充套件-替換和不可替換元素

從元素本身的特點來講，元素可以分為替換元素和不可替換元素。

替換元素:

不可替換元素

CSS中margin屬性詳解

margin屬性概述 margin是css層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性.該接受任何長度單位，可以是畫素 英吋 公釐或 em。相關屬性margin 可以單獨改變元素的上，下，左，右邊距。也可以一次改變所有的屬性。屬性 描述 margin 簡寫屬性。在乙個宣告中設定所有外邊距...

CSS 中Margin引數詳解

margin 1 乙個引數值，將用於全部的四邊。2 兩個引數值，第乙個用於上 下，第二個用於左 右。3 三個引數值，第乙個用於上，第二個用於左 右，第三個用於下。4 四個引數值，將按上 右 下 左的順序作用於四邊。再如 有人問css 居中如何實現。那可以這麼寫 margin 0 auto margi...

CSS中margin和padding屬性的區別

本文將講述html和css的關鍵 盒子模型 box model 理解box model的關鍵便是margin和padding屬性,而正確理解這兩個屬性也是學習用css布局的關鍵.注 為什麼不翻譯margin和padding?原因一,在漢語中並沒有與之相對應的詞語 原因二 即使有這樣的詞語,由於在編寫...