margin屬性概述
margin是css層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性.相關屬性該接受任何長度單位，可以是畫素、英吋、公釐或 em。
margin 可以單獨改變元素的上，下，左，右邊距。也可以一次改變所有的屬性。使用語法屬性
描述
margin
簡寫屬性。在乙個宣告中設定所有外邊距屬性。
margin-bottom
設定元素的下外邊距。
margin-left
設定元素的左外邊距。
margin-right
設定元素的右外邊距。
margin-top
設定元素的上外邊距。
1.使用單獨屬性設定四邊的距離
#d22.直接使用margin屬性設定所有外邊距:
#d2margin合併(摺疊)
注意,在使用css的margin屬性時,會出現margin屬性的合併(摺疊)的現象.這種合併分為兩種: 並列元素的合併和巢狀元素的合併
1.並列元素的合併:
具體表現為:
當兩個元素並列時，兩者相隔的外邊距，取的是兩者所設定margin的最大值。
例如:
2.巢狀元素的合併:具體表現為:
當兩個元素巢狀到一起,並且沒有內邊距或邊框把外邊距分隔開時,它們的外邊距也會發生合併
例如:
3.margin摺疊注意事項：注意事項margin摺疊只發生在塊級元素上；
浮動元素的margin不與任何margin發生摺疊；
設定了屬性overflow且值不為visible的塊級元素，將不與它的子元素發生margin摺疊；
絕對定位元素的margin不與任何margin發生摺疊；
根元素的margin不與其它任何margin發生摺疊；
注意,在實際開發中.margin-bottom和margin-top需要特別說明也就是說,普通的行內元素是無法使用該屬性的.
例如:
<結果: -->完全沒有任何效果html
>
<
head
>
<
meta
charset="utf-8"
>
<
title
>關於margin-bottom和margin-top
title
>
<
style
>
divspan
style
>
head
>
<
body
>
<
div>內容體
div>
<
span
>我是span
span
>
<
div>內容體
div>
body
>
html
>
解決方案:
當元素是行內元素時，不使用該屬性擴充套件-塊級元素和行級元素把該元素轉換為塊級元素或者行內塊級元素
塊級元素總是在新行上開始，佔據一整行；
高度，行高以及外邊距和內邊距都可控制；
寬度與內容無關；
它可以容納任何元素。
行級元素
和其他元素都在一行上；
不可以設定寬高，其寬度隨著內容增加，高度隨字型大小而改變，寬高只與內容有關，
行內元素只能容納文字或者其他行內元素。
可以設定外邊界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?原因一,在漢語中並沒有與之相對應的詞語 原因二 即使有這樣的詞語,由於在編寫...