CSS中margin屬性詳解
margin是CSS層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性.
該接受任何長度單位，可以是像素、英寸、毫米或 em。
相關屬性
margin 可以單獨改變元素的上，下，左，右邊距。也可以一次改變所有的屬性。
使用語法1.使用單獨屬性設置四邊的距離
#d2 { border: 1px solid blue; /*為了顯示效果,所以讓d2有了邊框 */ margin-top: 20px; /*上邊距為20px*/ margin-right: 30px; /*右邊距為30px*/ margin-bottom: 40px; /*下邊距40px*/ margin-left: 50px; /*左邊距為50px*/ }
? 效果:
2.直接使用margin屬性設置所有外邊距:
#d2 {
border: 1px solid blue; /*為了顯示效果,所以讓d2有了邊框 */
margin: 20px 30px 40px 50px; /*和上圖所示效果完全一樣,相當於上個案例的簡化寫法*/
}3.使用margin簡化寫法註意事項:
-
如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。
-
如果只提供一個，將用於全部的四邊。
-
如果提供兩個，第一個用於上、下，第二個用於左、右。
- 如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。
margin合並(折疊)
這種合並分為兩種: 並列元素的合並和嵌套元素的合並
1.並列元素的合並:
具體表現為:
? 當兩個元素並列時，兩者相隔的外邊距，取的是兩者所設置margin的最大值。
例如:
2.嵌套元素的合並:
具體表現為:
? 當兩個元素嵌套到一起,並且沒有內邊距或邊框把外邊距分隔開時,它們的外邊距也會發生合並
例如:
3.margin折疊註意事項：
margin折疊只發生在塊級元素上；
浮動元素的margin不與任何margin發生折疊；
設置了屬性overflow且值不為visible的塊級元素，將不與它的子元素發生margin折疊；
絕對定位元素的margin不與任何margin發生折疊；
根元素的margin不與其它任何margin發生折疊；
註意事項
註意,在實際開發中.margin-bottom和margin-top需要特別說明
替代(Replaced)行內元素可以應用這兩個屬性。
非替代(non-Replaced)行內元素要使用該屬性,則必須先使該對象表現為塊級或行內塊級。
外延邊距始終透明。
也就是說,普通的行內元素是無法使用該屬性的.
例如:
<html>
<head>
<meta charset="UTF-8">
<title>關於margin-bottom和margin-top</title>
<style>
div{
border: 1px solid red;
}
span{
border: 1px solid blue;
margin-top: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>內容體</div>
<span>我是span</span>
<div>內容體</div>
</body>
</html>結果: -->完全沒有任何效果
解決方案:
當元素是行內元素時，不使用該屬性
把該元素轉換為塊級元素或者行內塊級元素
擴展-塊級元素和行級元素
塊級元素
總是在新行上開始，占據一整行；
高度，行高以及外邊距和內邊距都可控制；
寬度與內容無關；
它可以容納任何元素。
行級元素
和其他元素都在一行上；
不可以設置寬高，其寬度隨著內容增加，高度隨字體大小而改變，寬高只與內容有關，
行內元素只能容納文本或者其他行內元素。
可以設置外邊界margin，但margin不對上下起作用，只能對左右起作用，
轉換
? 行級元素與塊級元素之間可以通過css的display屬性進行轉換
擴展-替換和不可替換元素
從元素本身的特點來講，元素可以分為替換元素和不可替換元素。
替換元素:
替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
例如:
<img src="cat.jpg"/>
瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息並顯示出來.
而如果查看HTML代碼，則看不到圖片的實際內容；<input type="submit" value="提交"/>
瀏覽器是根據<input>標簽的type屬性，來決定是顯示輸入框，還是單選按鈕等所以，HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往在源代碼中並沒有實際的內容，而是要通過瀏覽器的解析才能顯示出不同的效果.，
不可替換元素
不可替換元素指的是內容直接表現給用戶端（例如瀏覽器）的元素。
例如：
<p>段落的內容</p>就是一個不可替換元素，瀏覽器上顯示的內容就是標簽
CSS中margin屬性詳解