CSS外邊距
圍繞在元素邊框的空白區域就是外邊距 設置外邊距會在元素外創建額外的空白
設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
CSS margin 屬性
margin 屬性 接受任何長度單位 可以是像素 英寸 毫米 或者 em
margin 可以設置為auto 更常見的做法是為外邊距設置長度值 下面的聲明在h1元素的各個邊上設置了1/4英寸的空白
h1 {
margin:0.25in
}
下面的例子為h1元素的思辨分別設置了不同的外邊距 所使用的長度均為像素px
h1 {margin : 10px 0px 15px 5px;}
與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍着元素順時針旋轉的： 上 右 下 左
值復致
有時候 我們會復制一些重復的值
p {margin: 0.5em 1em 0.5em 1em;}
通過值復制 我們可以寫成下面的格式
p {margin: 0.5em 1em;}
上圖就是值復制的一些原則
換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復制得到。如果給定了兩個值，第 4 個值會從第 2 個值復制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復制得到。最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復制得到。
利用這個簡單的機制，您只需指定必要的值，而不必全部都應用 4 個值，例如：
h1 {margin: 0.25em 1em 0.5em;} /* 等價於 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* 等價於 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等價於 1px 1px 1px 1px */
單邊外邊距屬性
您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：
margin-top
margin-right
margin-bottom
margin-left
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
例子
<html> <head> <meta charset="UTF-8"> <title>鏈接</title> <style type="text/css"> *{ margin: 0px; } p.leftmargin { margin-left:2cm; } </style> </head> <body> <p>這個段落沒有指定外邊距</p> <p class="leftmargin">這個段落帶有指定的左外邊距</p> </body> </html>
CSS 外邊框屬性
CSS外邊距合並
外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
外邊距合並
外邊距合並是相當簡單的概念 但是在實踐中對網頁進行布局的時候 他會造成許多混淆
簡單的說 外邊距合並指的是 當兩個垂直外邊距相遇時 他們將形成一個外邊距 合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者
當一個元素出現在另一個元素上面時 第一個元素的下邊距與第二個元素的上邊距發生合並 請看下圖：
當一個元素包含在另一個元素中時（假設沒有內邊距 或者邊框把外邊距分隔開）他們的上和 下邊距也會發生合並
外邊距甚至可以與自身發生合並。
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合並：
如果這個外邊距遇到另一個元素的外邊距，它還會發生合並：
外邊距合並初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合並，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍。如果發生外邊距合並，段落之間的上外邊距和下外邊距就合並在一起，這樣各處的距離就一致了。
總結:(塌陷現象)
在標准文檔流中 豎直方向的margin不疊加 以較大的為准
在標准文檔流中 水平方向的margin會有疊加現象
以上只在標准文檔流中出現，沒有在標准中沒有上述現象(塌陷現象)
盒子居中
margin: 0 auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background-color: blue; /* 在右邊 */ /* margin-left: auto; */ /* 在左邊 */ /* margin-right: auto; */ /* 在中間 */ margin:0 auto; } </style> </head> <body> <div></div> </body> </html>
注意:
1.使用margin:0 auto 使盒子居中的時候，盒子必須有明確的width
2.只有標准流的盒子 才能使用margin:0 auto 居中 也就是說當一個盒子浮動了 絕對定位 或者相對定位了 不能使用此方法居中
3. 此方法是使盒子居中，並不是文字居中 使用text-align使文字居中
善於使用父親的padding而不是兒子的margin
margin 表達的是兄弟之間的距離 父子之間的距離不用margin表示 而是用padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { width: 100px; height: 100px; background-color: yellow; padding: 50px 50px; /* border: 1px solid red; */ } p { /* 如果Div不加邊框 會使div向下移動50像素 即把div拉下來 加了邊框會是正常現象 */ /* 所以我們為了如果要讓兒子在父親內有上下左右邊框 可以使用父親的padding屬性 而不是兒子的margin屬性 */ /* margin-top: 50px; */ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div> <p></p> </div> </body> </html>
現象
只寫p 的margin-top
p的margin 加div的邊框
利用div的 padding實現