CSS margin 在段落中的使用方法

一、margin 是什麼

CSS margin（外邊距）是CSS盒模型中的一個重要屬性，可以控制元素與其周圍元素之間的間隔或留白。它是由上下左右四個方向的值組成的，可以設置為具體的長度值，也可以設置為 auto 或百分比。一個元素可以有多個 margin 值，每個值之間用空格分隔。

margin 值可以影響元素的位置和大小。元素的外邊距會將元素和文檔中其它元素之間的距離擴大。當元素包含在容器中時，還會將元素和容器之間的距離擴大。

p {
  margin: 10px;
}

二、margin 的幾種用法

1. margin 的縮寫

margin 可以使用縮寫方式來設置上下左右四個值，分別對應四個方向的外邊距大小，按順序依次為 top、right、bottom、left。

p {
  margin: 10px 20px 30px 40px;
}

上面的代碼表示p元素的上邊距為10px，右邊距為20px，下邊距為30px，左邊距為40px。

2. margin 水平居中

通過 margin-left 和 margin-right 設置 auto，可以實現元素水平居中的效果，適用於塊級元素。

.container {
  text-align: center;
}

.box {
  width: 200px;
  margin: auto;
}

3. margin 去除外邊距

有時候我們需要去掉元素的外邊距，可以使用負值的方式，將 margin 設置為負數。

p {
  margin: -10px;
}

上面的代碼表示p元素的上下左右外邊距均為-10px。

三、margin 的注意事項

1. margin 合併

當相鄰兩個元素具有相同的 margin 值時，它們之間的邊距將會合併，合併後的外邊距大小為兩個外邊距中的較大值。

p {
  margin-bottom: 20px;
}

h3 {
  margin-top: 30px;
}

上面的代碼中，h3 元素的上外邊距為30px，p 元素的下外邊距為20px，它們相鄰的部分的外邊距將會合併，合併後的外邊距為30px，即兩個外邊距中的較大值。

2. margin 與邊框的交界處

當 margin 與邊框的交界處重疊時，交界處只會顯示其中的一個。

div {
  width: 200px;
  height: 200px;
  border: solid 1px black;
  margin: 50px;
}

上面的代碼中，div 元素的外邊距為50px，邊框為1px的黑色實線，div 在瀏覽器中呈現出來時，邊框和外邊距沒有重疊，這是由於邊框顯示在外面，而外邊距則顯示在邊框內部。

3. margin 與父容器邊框的交界處

當 margin 與父容器邊框的交界處重疊時，父容器並不會擴大，而是會採用最大的邊距值。

.container {
  width: 200px;
  height: 200px;
  border: solid 1px black;
}

.box {
  margin: 50px;
  height: 100px;
  width: 100px;
}

上面的代碼中，box 元素的外邊距為50px，父容器的邊框為1px的黑色實線，box 元素在父容器中間，當外邊距和邊框重疊時，父容器並不會擴大，而是採用最大的邊距值100px。