CSS 的 margin 屬性
margin（邊距）是一個在CSS中常用的簡單屬性，用於在元素周圍添加空間。
記住：
margin在元素邊框之外添加空間padding在元素邊框之內添加空間
具體的 margin 屬性
margin 有四個相關屬性，可以一次性改變單個邊的 margin：
margin-topmargin-rightmargin-bottommargin-left
使用這些屬性非常簡單，不容易混淆，例如：
1 | margin-left: 30px; |
使用 margin 快捷方式
margin 是一個快捷方式，用於同時指定多個邊的 margin，根據輸入的數值個數不同，其行為也不同。
1個數值
如果使用一個數值，那麼該數值將應用於所有邊的 margin：top、right、bottom、left。
1 | margin: 20px; |
2個數值
如果使用兩個數值，那麼第一個數值將應用於底部和頂部，第二個數值將應用於左邊和右邊。
1 | margin: 20px 10px; |
3個數值
如果使用三個數值，那麼第一個數值將應用於頂部，第二個數值將應用於左右邊，第三個數值將應用於底部。
1 | margin: 20px 10px 30px; |
4個數值
如果使用四個數值，那麼第一個數值將應用於頂部，第二個數值將應用於右邊，第三個數值將應用於底部，第四個數值將應用於左邊。
1 | margin: 20px 10px 5px 0px; |
因此，順序是頂-右-底-左。
可接受的數值
margin 可接受以任何長度單位表示的數值，最常見的單位是 px、em、rem，但也存在許多其他單位。
它還接受百分比值和特殊值 auto。
使用 auto 來居中元素
auto 可以用於告訴瀏覽器自動選擇 margin，最常用於以下方式居中元素：
1 | margin: 0 auto; |
如上所述，使用兩個數值時，第一個數值應用於底部和頂部，第二個數值應用於左邊和右邊。
現代居中元素的方法是使用Flexbox及其 justify-content: center; 指令。
老版本的瀏覽器當然不支援 Flexbox，如果需要支援這些瀏覽器，margin: 0 auto; 仍然是一個不錯的選擇。
使用負 margin
margin 是唯一一個可以取負值的與尺寸相關的屬性。這也非常有用。
設置負的上邊距使元素在它之前的元素之上移動，並且給定足夠的負值，它會移出頁面。
負的下邊距會使後面的元素向上移動。
負的右邊距會使元素的內容擴展到超過其允許的內容大小。
負的左邊距將元素向左移動，并擁有足夠的負值，它將移出頁面。
tags: [“CSS”, “margin”, “spacing”]