margin（邊距）是一個在CSS中常用的簡單屬性，用於在元素周圍添加空間。

記住：

  • margin 在元素邊框之外添加空間
  • padding 在元素邊框之內添加空間

具體的 margin 屬性

margin 有四個相關屬性，可以一次性改變單個邊的 margin：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

使用這些屬性非常簡單，不容易混淆，例如：

margin-left: 30px;
margin-right: 3em;

使用 margin 快捷方式

margin 是一個快捷方式，用於同時指定多個邊的 margin，根據輸入的數值個數不同，其行為也不同。

1個數值

如果使用一個數值，那麼該數值將應用於所有邊的 margin：top、right、bottom、left。

margin: 20px;

2個數值

如果使用兩個數值，那麼第一個數值將應用於底部和頂部，第二個數值將應用於左邊和右邊。

margin: 20px 10px;

3個數值

如果使用三個數值，那麼第一個數值將應用於頂部，第二個數值將應用於左右邊，第三個數值將應用於底部。

margin: 20px 10px 30px;

4個數值

如果使用四個數值，那麼第一個數值將應用於頂部，第二個數值將應用於右邊，第三個數值將應用於底部，第四個數值將應用於左邊。

margin: 20px 10px 5px 0px;

因此，順序是頂-右-底-左。

可接受的數值

margin 可接受以任何長度單位表示的數值，最常見的單位是 px、em、rem，但也存在許多其他單位。

它還接受百分比值和特殊值 auto。

使用 auto 來居中元素

auto 可以用於告訴瀏覽器自動選擇 margin，最常用於以下方式居中元素：

margin: 0 auto;

如上所述，使用兩個數值時，第一個數值應用於底部和頂部，第二個數值應用於左邊和右邊。

現代居中元素的方法是使用Flexbox及其 justify-content: center; 指令。

老版本的瀏覽器當然不支援 Flexbox，如果需要支援這些瀏覽器，margin: 0 auto; 仍然是一個不錯的選擇。

使用負 margin

margin 是唯一一個可以取負值的與尺寸相關的屬性。這也非常有用。 設置負的上邊距使元素在它之前的元素之上移動，並且給定足夠的負值，它會移出頁面。

負的下邊距會使後面的元素向上移動。

負的右邊距會使元素的內容擴展到超過其允許的內容大小。

負的左邊距將元素向左移動，并擁有足夠的負值，它將移出頁面。